<html>

<head>
  <meta charset="utf-8">
  <title id='title'>MDC</title>
  <link href="apple.png" rel="shortcut icon" />
  <link rel="stylesheet" href="material/material-components-web.min.css">
  <link rel="stylesheet" href="material/material-icons.css">
  <link rel="stylesheet" href="material/material-icons-outlined.css">
  <link rel="stylesheet" href="material/material-icons-round.css">
  <link rel="stylesheet" href="material/material-icons-sharp.css">
  <link rel="stylesheet" href="material/material-icons-two-tone.css">
  <script src="material/material-components-web.min.js"></script>
</head>
<html>

<head>
  <meta charset="utf-8">
  <title id='title'>MDC</title>
  <link href="apple.png" rel="shortcut icon" />
  <link rel="stylesheet" href="material/material-components-web.min.css">
  <link rel="stylesheet" href="material/material-icons.css">
  <link rel="stylesheet" href="material/material-icons-outlined.css">
  <link rel="stylesheet" href="material/material-icons-round.css">
  <link rel="stylesheet" href="material/material-icons-sharp.css">
  <link rel="stylesheet" href="material/material-icons-two-tone.css">
  <script src="material/material-components-web.min.js"></script>
</head>

<body>

  <!-- mdc drawer 2 -->

  <aside class="mdc-drawer mdc-drawer--modal" id="mdc-drawer2">
    <div class="mdc-drawer__content">
      <nav class="mdc-list" id="mdc-list2">
        <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page" tabindex="0">
          <span class="mdc-list-item__ripple"></span>
          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
          <span class="mdc-list-item__text">Inbox</span>
        </a>
        <a class="mdc-list-item" href="#">
          <span class="mdc-list-item__ripple"></span>
          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
          <span class="mdc-list-item__text">Outgoing</span>
        </a>
        <a class="mdc-list-item" href="#">
          <span class="mdc-list-item__ripple"></span>
          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
          <span class="mdc-list-item__text">Drafts</span>
        </a>
      </nav>
    </div>
  </aside>

  <div class="mdc-drawer-scrim"></div>


  <!-- 
  <header class="mdc-top-app-bar">
    <div class="mdc-top-app-bar__row">
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
        <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" aria-label="Open navigation menu">menu</button>
        <span class="mdc-top-app-bar__title">Regular top app bar</span>
      </section>
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
        <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Favorite">favorite</button>
        <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Search">search</button>
        <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Options">more_vert</button>
      </section>
    </div>
  </header>
  <main class="mdc-top-app-bar--fixed-adjust">
   -->


  <!-- 
  <header class="mdc-top-app-bar">
    <div class="mdc-top-app-bar__row">
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
        <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" aria-label="Close">close</button>
        <span class="mdc-top-app-bar__title">Contextual action bar</span>
      </section>
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
        <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Share">share</button>
        <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Delete">delete</button>
        <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Open menu">more_vert</button>
      </section>
    </div>
  </header>
  <main class="mdc-top-app-bar--fixed-adjust">
   -->


  <!-- <header class="mdc-top-app-bar mdc-top-app-bar--short">
    <div class="mdc-top-app-bar__row">
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
        <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
        <span class="mdc-top-app-bar__title">Short top app bars are top app bars that can collapse to the navigation icon side when scrolled</span>
      </section>
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
        <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
      </section>
    </div>
  </header>
  <main class="mdc-top-app-bar--short-fixed-adjust">
   -->


  <!-- 
  <header class="mdc-top-app-bar mdc-top-app-bar--short mdc-top-app-bar--short-collapsed">
    <div class="mdc-top-app-bar__row">
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
        <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
        <span class="mdc-top-app-bar__title">Short top app bars can be configured to always appear collapsed</span>
      </section>
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
        <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
      </section>
    </div>
  </header>
  <main class="mdc-top-app-bar--short-fixed-adjust">
  
   -->


  <header class="mdc-top-app-bar mdc-top-app-bar--fixed">
    <div class="mdc-top-app-bar__row">
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
        <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
        <span class="mdc-top-app-bar__title">Fixed top app bars stay at the top of the page and elevate above the
          content when scrolled</span>
      </section>
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
        <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button"
          aria-label="Bookmark this page">bookmark</button>
      </section>
    </div>
  </header>
  <main class="mdc-top-app-bar--fixed-adjust">


    <!-- 
  <header class="mdc-top-app-bar mdc-top-app-bar--prominent">
    <div class="mdc-top-app-bar__row">
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
        <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
        <span class="mdc-top-app-bar__title">The prominent top app bar is taller</span>
      </section>
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
        <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
      </section>
    </div>
  </header>
  <main class="mdc-top-app-bar--prominent-fixed-adjust">
   -->

    <!-- 
  <header class="mdc-top-app-bar mdc-top-app-bar--dense">
    <div class="mdc-top-app-bar__row">
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
        <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
        <span class="mdc-top-app-bar__title">The dense top app bar is shorter</span>
      </section>
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
        <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
      </section>
    </div>
  </header>
  <main class="mdc-top-app-bar--dense-fixed-adjust">
   -->

    <script>
      for (const el of document.querySelectorAll('.mdc-top-app-bar')) {
        const topAppBar = new mdc.topAppBar.MDCTopAppBar(el);
      }
    </script>


    <h4>buttons</h4>

    <div class="mdc-touch-target-wrapper">
      <button class="mdc-button mdc-button--touch">
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">My Button</span>
      </button>
    </div>


    <h4>Text button</h4>

    <button class="mdc-button">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Text Button</span>
    </button>


    <h4>Text button with icon</h4>

    <button class="mdc-button mdc-button--icon-leading">
      <span class="mdc-button__ripple"></span>
      <i class="material-icons mdc-button__icon" aria-hidden="true">bookmark</i>
      <span class="mdc-button__label">Text Button plus icon</span>
    </button>


    <h4>Outlined button</h4>

    <button class="mdc-button mdc-button--outlined">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Outlined Button</span>
    </button>


    <h4>Outlined button with icon</h4>

    <button class="mdc-button mdc-button--outlined mdc-button--icon-leading">
      <span class="mdc-button__ripple"></span>
      <i class="material-icons mdc-button__icon" aria-hidden="true">bookmark</i>
      <span class="mdc-button__label">Outlined Button plus Icon</span>
    </button>


    <h4>Contained button</h4>

    <button class="mdc-button mdc-button--raised">
      <span class="mdc-button__label">Contained Button</span>
    </button>


    <h4>Contained button with icon</h4>

    <button class="mdc-button mdc-button--raised mdc-button--leading">
      <span class="mdc-button__ripple"></span>
      <i class="material-icons mdc-button__icon" aria-hidden="true">bookmark</i>
      <span class="mdc-button__label">Contained Button plus Icon</span>
    </button>


    <h4>To add an icon</h4>

    <button class="mdc-button">
      <span class="mdc-button__ripple"></span>
      <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
      <span class="mdc-button__label">Button</span>
    </button>


    <h4>use an SVG icon</h4>

    <button class="mdc-button">
      <span class="mdc-button__ripple"></span>
      <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
        <rect x=0 y=0 width=10 height=10 fill=green></rect>
      </svg>
      <span class="mdc-button__label">Button</span>
    </button>


    <h4>Trailing Icon</h4>

    <button class="mdc-button mdc-button--icon-trailing">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Button</span>
      <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
    </button>


    <h4>Disabled</h4>

    <button class="mdc-button" disabled>
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Button</span>
    </button>



    <h4> FAB (floating action button)</h4>

    <div class="mdc-touch-target-wrapper">
      <button class="mdc-fab mdc-fab--mini mdc-fab--touch">
        <div class="mdc-fab__ripple"></div>
        <span class="material-icons mdc-fab__icon">add</span>
        <div class="mdc-fab__touch"></div>
      </button>
    </div>


    <h4>Regular FAB example</h4>

    <button class="mdc-fab" aria-label="Favorite">
      <div class="mdc-fab__ripple"></div>
      <span class="mdc-fab__icon material-icons">favorite</span>
    </button>


    <h4>Mini FAB example</h4>

    <button class="mdc-fab mdc-fab--mini" aria-label="Favorite">
      <div class="mdc-fab__ripple"></div>
      <span class="mdc-fab__icon material-icons">favorite</span>
    </button>


    <h4>Extended FAB example</h4>

    <button class="mdc-fab mdc-fab--extended">
      <div class="mdc-fab__ripple"></div>
      <span class="material-icons mdc-fab__icon">add</span>
      <span class="mdc-fab__label">Create</span>
    </button>

    <script>
      for (const el of document.querySelectorAll('.mdc-fab')) {
        const tooltip = new mdc.ripple.MDCRipple(el);
      }
    </script>


    <h4>Cards</h4>

    <div class="mdc-card" style="width: 350px; height: 150px;">
      <div class="mdc-card__actions">
        <button class="mdc-button mdc-card__action mdc-card__action--button">
          <div class="mdc-button__ripple"></div>
          <span class="mdc-button__label">Action 1</span>
        </button>
        <button class="mdc-button mdc-card__action mdc-card__action--button">
          <div class="mdc-button__ripple"></div>
          <span class="mdc-button__label">Action 2</span>
        </button>
      </div>
    </div>


    <h4>Outlined card with icon buttons</h4>

    <div class="mdc-card mdc-card--outlined" style="width: 350px; height: 150px;">
      <div class="mdc-card__actions">
        <button class="mdc-icon-button mdc-card__action mdc-card__action--icon" aria-pressed="false"
          aria-label="Add to favorites" title="Add to favorites">
          <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
          <i class="material-icons mdc-icon-button__icon">favorite_border</i>
        </button>
        <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
          title="Share">share</button>
        <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
          title="More options">more_vert</button>
      </div>
    </div>

    <h4>Rich media</h4>

    <div class="mdc-card" style="width: 300px;">
      <div class="mdc-card__primary-action" tabindex="0">
        <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('apple.png');">
          <div class="mdc-card__media-content">Title</div>
        </div>
        <div class="mdc-card__ripple"></div>
      </div>
    </div>

    <h4>Actions</h4>

    <div class="mdc-card" style="width: 300px;">
      <div class="mdc-card__primary-action" tabindex="0">
        <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('apple.png');">
          <div class="mdc-card__media-content">Title</div>
        </div>
        <div class="mdc-card__ripple"></div>
      </div>
      <div class="mdc-card__actions">
        <button class="mdc-button mdc-card__action mdc-card__action--button">
          <div class="mdc-button__ripple"></div>
          <span class="mdc-button__label">Action 1</span>
        </button>
        <button class="mdc-button mdc-card__action mdc-card__action--button">
          <div class="mdc-button__ripple"></div>
          <span class="mdc-button__label">Action 2</span>
        </button>
      </div>
    </div>

    <h4>Actions 2</h4>

    <div class="mdc-card" style="width: 300px;">
      <div class="mdc-card__primary-action" tabindex="0">
        <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('apple.png');">
          <div class="mdc-card__media-content">Title</div>
        </div>
        <div class="mdc-card__ripple"></div>
      </div>
      <div class="mdc-card__actions">
        <button class="mdc-icon-button mdc-card__action mdc-card__action--icon" aria-pressed="false"
          aria-label="Add to favorites" title="Add to favorites">
          <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
          <i class="material-icons mdc-icon-button__icon">favorite_border</i>
        </button>
        <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
          title="Share">share</button>
        <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
          title="More options">more_vert</button>
      </div>
    </div>


    <h4>To have a single action button take up the entire width of the action row</h4>

    <div class="mdc-card" style="width: 300px;">
      <div class="mdc-card__actions mdc-card__actions--full-bleed">
        <a class="mdc-button mdc-card__action mdc-card__action--button" href="#">
          <div class="mdc-button__ripple"></div>
          <span class="mdc-button__label">All Business Headlines</span>
          <i class="material-icons mdc-button__icon" aria-hidden="true">arrow_forward</i>
        </a>
      </div>
    </div>


    <h4>To display buttons and icons in the same row, wrap them in mdc-card__action-buttons and mdc-card__action-icons
      elements</h4>

    <div class="mdc-card" style="width: 300px;">
      <div class="mdc-card__actions">
        <div class="mdc-card__action-buttons">
          <button class="mdc-button mdc-card__action mdc-card__action--button">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">Read</span>
          </button>
          <button class="mdc-button mdc-card__action mdc-card__action--button">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">Bookmark</span>
          </button>
        </div>
        <div class="mdc-card__action-icons">
          <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
            title="Share">share</button>
          <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
            title="More options">more_vert</button>
        </div>
      </div>
    </div>


    <h4>The following is an example incorporating all of the above elements</h4>

    <div class="mdc-card" style="width: 300px;">
      <div class="mdc-card__primary-action">
        <div class="mdc-card__media mdc-card__media--square">
          <div class="mdc-card__media-content">Title</div>
        </div>
        <!-- ... additional primary action content ... -->
        <div class="mdc-card__ripple"></div>
      </div>
      <div class="mdc-card__actions">
        <div class="mdc-card__action-buttons">
          <button class="mdc-button mdc-card__action mdc-card__action--button">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">Action 1</span>
          </button>
          <button class="mdc-button mdc-card__action mdc-card__action--button">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">Action 2</span>
          </button>
        </div>
        <div class="mdc-card__action-icons">
          <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
            title="Share">share</button>
          <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
            title="More options">more_vert</button>
        </div>
      </div>
    </div>


    <h4>checkboxes</h4>

    <div class="mdc-touch-target-wrapper">
      <div class="mdc-checkbox mdc-checkbox--touch">
        <input type="checkbox" class="mdc-checkbox__native-control" id="checkbox-1" />
        <div class="mdc-checkbox__background">
          <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
            <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
          </svg>
          <div class="mdc-checkbox__mixedmark"></div>
        </div>
        <div class="mdc-checkbox__ripple"></div>
      </div>
    </div>


    <h4>Checkbox example</h4>

    <div class="mdc-form-field">
      <div class="mdc-checkbox">
        <input type="checkbox" class="mdc-checkbox__native-control" id="checkbox-1" />
        <div class="mdc-checkbox__background">
          <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
            <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
          </svg>
          <div class="mdc-checkbox__mixedmark"></div>
        </div>
        <div class="mdc-checkbox__ripple"></div>
      </div>
      <label for="checkbox-1">Checkbox 1</label>
    </div>


    <h4>Disabled checkboxes</h4>

    <div class="mdc-checkbox mdc-checkbox--disabled">
      <input type="checkbox" id="basic-disabled-checkbox" class="mdc-checkbox__native-control" disabled />
      <div class="mdc-checkbox__background">
        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
          <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
        </svg>
        <div class="mdc-checkbox__mixedmark"></div>
      </div>
      <div class="mdc-checkbox__ripple"></div>
    </div>
    <label for="basic-disabled-checkbox" id="basic-disabled-checkbox-label">This is my disabled checkbox</label>


    <h4>Indeterminate checkboxes</h4>

    <div class="mdc-checkbox">
      <input type="checkbox" id="basic-indeterminate-checkbox" class="mdc-checkbox__native-control"
        data-indeterminate="true" />
      <div class="mdc-checkbox__background">
        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
          <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
        </svg>
        <div class="mdc-checkbox__mixedmark"></div>
      </div>
      <div class="mdc-checkbox__ripple"></div>
    </div>
    <label for="basic-indeterminate-checkbox" id="basic-indeterminate-checkbox-label">This is my indeterminate
      checkbox</label>


    <script>
      for (const el of document.querySelectorAll('.mdc-checkbox')) {
        const checkbox = new mdc.checkbox.MDCCheckbox(el)
      }
    </script>


    <h4>Chips</h4>

    <span class="mdc-evolution-chip-set" role="grid">
      <span class="mdc-evolution-chip-set__chips" role="presentation">
        <span class="mdc-evolution-chip" role="row" id="c0">
          <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell">
            <button class="mdc-evolution-chip__action mdc-evolution-chip__action--primary" type="button" tabindex="0">
              <span class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"></span>
              <span class="mdc-evolution-chip__text-label">Chip one</span>
            </button>
          </span>
        </span>
        <span class="mdc-evolution-chip" role="row" id="c1">
          <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell">
            <button class="mdc-evolution-chip__action mdc-evolution-chip__action--primary" type="button" tabindex="-1">
              <span class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"></span>
              <span class="mdc-evolution-chip__text-label">Chip two</span>
            </button>
          </span>
        </span>
      </span>
    </span>

    <script>
      for (const el of document.querySelectorAll('.mdc-evolution-chip-set')) {
        const chip = new mdc.chips.MDCChipSet(el)
      }
    </script>



    <h4>Standard data table</h4>

    <div class="mdc-data-table">
      <div class="mdc-data-table__table-container">
        <table class="mdc-data-table__table" aria-label="Dessert calories">
          <thead>
            <tr class="mdc-data-table__header-row">
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Dessert</th>
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader"
                scope="col">Carbs (g)</th>
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader"
                scope="col">Protein (g)</th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Comments</th>
            </tr>
          </thead>
          <tbody class="mdc-data-table__content">
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
              <td class="mdc-data-table__cell">Super tasty</td>
            </tr>
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.33333333333</td>
              <td class="mdc-data-table__cell">I like ice cream more</td>
            </tr>
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Eclair</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">6.0</td>
              <td class="mdc-data-table__cell">New filing flavor</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>


    <h4>Data table with row selection</h4>

    <div class="mdc-data-table">
      <div class="mdc-data-table__table-container">
        <table class="mdc-data-table__table" aria-label="Dessert calories">
          <thead>
            <tr class="mdc-data-table__header-row">
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox" role="columnheader"
                scope="col">
                <div class="mdc-checkbox mdc-data-table__header-row-checkbox mdc-checkbox--selected">
                  <input type="checkbox" class="mdc-checkbox__native-control" aria-label="Toggle all rows" />
                  <div class="mdc-checkbox__background">
                    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                      <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                  </div>
                  <div class="mdc-checkbox__ripple"></div>
                </div>
              </th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Signal name</th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Status</th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Severity</th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Stage</th>
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader"
                scope="col">Time</th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Roles</th>
            </tr>
          </thead>
          <tbody class="mdc-data-table__content">
            <tr data-row-id="u0" class="mdc-data-table__row">
              <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
                <div class="mdc-checkbox mdc-data-table__row-checkbox">
                  <input type="checkbox" class="mdc-checkbox__native-control" aria-labelledby="u0" />
                  <div class="mdc-checkbox__background">
                    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                      <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                  </div>
                  <div class="mdc-checkbox__ripple"></div>
                </div>
              </td>
              <th class="mdc-data-table__cell" scope="row" id="u0">Arcus watch slowdown</th>
              <td class="mdc-data-table__cell">Online</td>
              <td class="mdc-data-table__cell">Medium</td>
              <td class="mdc-data-table__cell">Triaged</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
              <td class="mdc-data-table__cell">Allison Brie</td>
            </tr>
            <tr data-row-id="u1" class="mdc-data-table__row mdc-data-table__row--selected" aria-selected="true">
              <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
                <div class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected">
                  <input type="checkbox" class="mdc-checkbox__native-control" checked aria-labelledby="u1" />
                  <div class="mdc-checkbox__background">
                    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                      <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                  </div>
                  <div class="mdc-checkbox__ripple"></div>
                </div>
              </td>
              <th class="mdc-data-table__cell" scope="row" id="u1">monarch: prod shared
                ares-managed-features-provider-heavy</th>
              <td class="mdc-data-table__cell">Offline</td>
              <td class="mdc-data-table__cell">Huge</td>
              <td class="mdc-data-table__cell">Triaged</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
              <td class="mdc-data-table__cell">Brie Larson</td>
            </tr>
            <tr data-row-id="u2" class="mdc-data-table__row mdc-data-table__row--selected" aria-selected="true">
              <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
                <div class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected">
                  <input type="checkbox" class="mdc-checkbox__native-control" checked aria-labelledby="u2" />
                  <div class="mdc-checkbox__background">
                    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                      <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                  </div>
                  <div class="mdc-checkbox__ripple"></div>
                </div>
              </td>
              <th class="mdc-data-table__cell" scope="row" id="u2">monarch: prod shared
                ares-managed-features-provider-heavy</th>
              <td class="mdc-data-table__cell">Online</td>
              <td class="mdc-data-table__cell">Minor</td>
              <td class="mdc-data-table__cell">Not triaged</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
              <td class="mdc-data-table__cell">Jeremy Lake</td>
            </tr>
            <tr data-row-id="u3" class="mdc-data-table__row">
              <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
                <div class="mdc-checkbox mdc-data-table__row-checkbox">
                  <input type="checkbox" class="mdc-checkbox__native-control" aria-labelledby="u3" />
                  <div class="mdc-checkbox__background">
                    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                      <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                  </div>
                  <div class="mdc-checkbox__ripple"></div>
                </div>
              </td>
              <th class="mdc-data-table__cell" scope="row" id="u3">Arcus watch slowdown</th>
              <td class="mdc-data-table__cell">Online</td>
              <td class="mdc-data-table__cell">Negligible</td>
              <td class="mdc-data-table__cell">Triaged</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
              <td class="mdc-data-table__cell">Angelina Cheng</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <h4>Data table with pagination</h4>

    <div class="mdc-data-table">
      <div class="mdc-data-table__table-container">
        <table class="mdc-data-table__table" aria-label="Dessert calories">
          <thead>
            <tr class="mdc-data-table__header-row">
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Dessert</th>
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader"
                scope="col">Carbs (g)</th>
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader"
                scope="col">Protein (g)</th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Comments</th>
            </tr>
          </thead>
          <tbody class="mdc-data-table__content">
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
              <td class="mdc-data-table__cell">Super tasty</td>
            </tr>
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.33333333333</td>
              <td class="mdc-data-table__cell">I like ice cream more</td>
            </tr>
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Eclair</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">6.0</td>
              <td class="mdc-data-table__cell">New filing flavor</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="mdc-data-table__pagination">
        <div class="mdc-data-table__pagination-trailing">
          <div class="mdc-data-table__pagination-rows-per-page">
            <div class="mdc-data-table__pagination-rows-per-page-label">
              Rows per page
            </div>

            <div
              class="mdc-select mdc-select--outlined mdc-select--no-label mdc-data-table__pagination-rows-per-page-select">
              <div class="mdc-select__anchor" role="button" aria-haspopup="listbox"
                aria-labelledby="demo-pagination-select" tabindex="0">
                <span class="mdc-select__selected-text-container">
                  <span id="demo-pagination-select" class="mdc-select__selected-text">10</span>
                </span>
                <span class="mdc-select__dropdown-icon">
                  <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5">
                    <polygon class="mdc-select__dropdown-icon-inactive" stroke="none" fill-rule="evenodd"
                      points="7 10 12 15 17 10">
                    </polygon>
                    <polygon class="mdc-select__dropdown-icon-active" stroke="none" fill-rule="evenodd"
                      points="7 15 12 10 17 15">
                    </polygon>
                  </svg>
                </span>
                <span class="mdc-notched-outline mdc-notched-outline--notched">
                  <span class="mdc-notched-outline__leading"></span>
                  <span class="mdc-notched-outline__trailing"></span>
                </span>
              </div>

              <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth" role="listbox">
                <ul class="mdc-list">
                  <li class="mdc-list-item mdc-list-item--selected" aria-selected="true" role="option" data-value="10">
                    <span class="mdc-list-item__text">10</span>
                  </li>
                  <li class="mdc-list-item" role="option" data-value="25">
                    <span class="mdc-list-item__text">25</span>
                  </li>
                  <li class="mdc-list-item" role="option" data-value="100">
                    <span class="mdc-list-item__text">100</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="mdc-data-table__pagination-navigation">
            <div class="mdc-data-table__pagination-total">
              1‑10 of 100
            </div>
            <button class="mdc-icon-button material-icons mdc-data-table__pagination-button" data-first-page="true"
              disabled>
              <div class="mdc-button__icon">first_page</div>
            </button>
            <button class="mdc-icon-button material-icons mdc-data-table__pagination-button" data-prev-page="true"
              disabled>
              <div class="mdc-button__icon">chevron_left</div>
            </button>
            <button class="mdc-icon-button material-icons mdc-data-table__pagination-button" data-next-page="true">
              <div class="mdc-button__icon">chevron_right</div>
            </button>
            <button class="mdc-icon-button material-icons mdc-data-table__pagination-button" data-last-page="true">
              <div class="mdc-button__icon">last_page</div>
            </button>
          </div>
        </div>
      </div>
    </div>

    <h4>Data table with progress indicator</h4>

    <!-- Use showProgress() and hideProgress() API to show or hide the progress indicator. -->

    <div class="mdc-data-table">
      <div class="mdc-data-table__table-container">
        <table class="mdc-data-table__table" aria-label="Dessert calories">
          <thead>
            <tr class="mdc-data-table__header-row">
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Dessert</th>
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader"
                scope="col">Carbs (g)</th>
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader"
                scope="col">Protein (g)</th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Comments</th>
            </tr>
          </thead>
          <tbody class="mdc-data-table__content">
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
              <td class="mdc-data-table__cell">Super tasty</td>
            </tr>
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.33333333333</td>
              <td class="mdc-data-table__cell">I like ice cream more</td>
            </tr>
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Eclair</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">6.0</td>
              <td class="mdc-data-table__cell">New filing flavor</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="mdc-data-table__progress-indicator">
        <div class="mdc-data-table__scrim"></div>
        <div class="mdc-linear-progress mdc-linear-progress--indeterminate mdc-data-table__linear-progress"
          role="progressbar" aria-label="Data is being loaded...">
          <div class="mdc-linear-progress__buffer">
            <div class="mdc-linear-progress__buffer-bar"></div>
            <div class="mdc-linear-progress__buffer-dots"></div>
          </div>
          <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
            <span class="mdc-linear-progress__bar-inner"></span>
          </div>
          <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
            <span class="mdc-linear-progress__bar-inner"></span>
          </div>
        </div>
      </div>
    </div>

    <h4>Data table with column sorting</h4>

    <div class="mdc-data-table">
      <table class="mdc-data-table__table" aria-label="Dessert calories">
        <thead>
          <tr class="mdc-data-table__header-row">
            <th class="mdc-data-table__header-cell mdc-data-table__header-cell--with-sort" role="columnheader"
              scope="col" aria-sort="none" data-column-id="dessert">
              <div class="mdc-data-table__header-cell-wrapper">
                <div class="mdc-data-table__header-cell-label">
                  Dessert
                </div>
                <button class="mdc-icon-button material-icons mdc-data-table__sort-icon-button"
                  aria-label="Sort by dessert" aria-describedby="dessert-status-label">arrow_upward</button>
                <div class="mdc-data-table__sort-status-label" aria-hidden="true" id="dessert-status-label">
                </div>
              </div>
            </th>
            <th
              class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric mdc-data-table__header-cell--with-sort mdc-data-table__header-cell--sorted"
              role="columnheader" scope="col" aria-sort="ascending" data-column-id="carbs">
              <div class="mdc-data-table__header-cell-wrapper">
                <button class="mdc-icon-button material-icons mdc-data-table__sort-icon-button"
                  aria-label="Sort by carbs" aria-describedby="carbs-status-label">arrow_upward</button>
                <div class="mdc-data-table__header-cell-label">
                  Carbs (g)
                </div>
                <div class="mdc-data-table__sort-status-label" aria-hidden="true" id="carbs-status-label"></div>
              </div>
            </th>
            <th
              class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric mdc-data-table__header-cell--with-sort"
              role="columnheader" scope="col" aria-sort="none" data-column-id="protein">
              <div class="mdc-data-table__header-cell-wrapper">
                <button class="mdc-icon-button material-icons mdc-data-table__sort-icon-button"
                  aria-label="Sort by protein" aria-describedby="protein-status-label">arrow_upward</button>
                <div class="mdc-data-table__header-cell-label">
                  Protein (g)
                </div>
                <div class="mdc-data-table__sort-status-label" aria-hidden="true" id="protein-status-label"></div>
              </div>
            </th>
            <th class="mdc-data-table__header-cell" role="columnheader" scope="col" data-column-id="comments">
              Comments
            </th>
          </tr>
        </thead>
        <tbody class="mdc-data-table__content">
          <tr class="mdc-data-table__row">
            <td class="mdc-data-table__cell">Frozen yogurt</td>
            <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
              24
            </td>
            <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
              4.0
            </td>
            <td class="mdc-data-table__cell">Super tasty</td>
          </tr>
          <tr class="mdc-data-table__row">
            <td class="mdc-data-table__cell">Bread</td>
            <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
              10
            </td>
            <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
              8.0
            </td>
            <td class="mdc-data-table__cell">Super tasty</td>
          </tr>
        </tbody>
      </table>
    </div>


    <script>
      for (const el of document.querySelectorAll('.mdc-data-table')) {
        const checkbox = new mdc.dataTable.MDCDataTable(el)
      }
    </script>


    <h4>Alert dialog</h4>

    <div class="mdc-dialog" id="dialog1">
      <div class="mdc-dialog__container">
        <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="my-dialog-title"
          aria-describedby="my-dialog-content">
          <div class="mdc-dialog__content" id="my-dialog-content">
            Discard draft?
          </div>
          <div class="mdc-dialog__actions">
            <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
              <div class="mdc-button__ripple"></div>
              <span class="mdc-button__label">Cancel</span>
            </button>
            <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="discard">
              <div class="mdc-button__ripple"></div>
              <span class="mdc-button__label">Discard</span>
            </button>
          </div>
        </div>
      </div>
      <div class="mdc-dialog__scrim"></div>
    </div>

    <script type="text/javascript">
      let dialog1 = new mdc.dialog.MDCDialog(document.querySelector('#dialog1'))
      dialog1.listen('MDCDialog:opened', function () {
      });
      dialog1.listen('MDCDialog:closing', function () {
      }); 
    </script>

    <button class="mdc-button" onclick="dialog1.open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Alert dialog</span>
    </button>


    <h4>Simple dialog</h4>

    <div class="mdc-dialog" id="dialog2">
      <div class="mdc-dialog__container">
        <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="my-dialog-title"
          aria-describedby="my-dialog-content">
          <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
          <h2 class="mdc-dialog__title" id="my-dialog-title">
            <!--
       -->Choose a Ringtone
            <!--
     -->
          </h2>
          <div class="mdc-dialog__content" id="my-dialog-content">
            <ul class="mdc-list mdc-list--avatar-list">
              <li class="mdc-list-item" tabindex="0" data-mdc-dialog-action="none">
                <span class="mdc-list-item__text">None</span>
              </li>
              <li class="mdc-list-item" data-mdc-dialog-action="callisto">
                <span class="mdc-list-item__text">Callisto</span>
              </li>
              <!-- ... -->
            </ul>
          </div>
        </div>
      </div>
      <div class="mdc-dialog__scrim"></div>
    </div>

    <button class="mdc-button" onclick="new mdc.dialog.MDCDialog(document.querySelector('#dialog2')).open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Simple dialog</span>
    </button>


    <h4>Confirmation dialog</h4>

    <div class="mdc-dialog" id="dialog3">
      <div class="mdc-dialog__container">
        <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="my-dialog-title"
          aria-describedby="my-dialog-content">
          <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
          <h2 class="mdc-dialog__title" id="my-dialog-title">
            <!--
       -->Choose a Ringtone
            <!--
     -->
          </h2>
          <div class="mdc-dialog__content" id="my-dialog-content">
            <ul class="mdc-list">
              <li class="mdc-list-item" tabindex="0">
                <span class="mdc-list-item__graphic">
                  <div class="mdc-radio">
                    <input class="mdc-radio__native-control" type="radio" id="test-dialog-baseline-confirmation-radio-1"
                      name="test-dialog-baseline-confirmation-radio-group" checked>
                    <div class="mdc-radio__background">
                      <div class="mdc-radio__outer-circle"></div>
                      <div class="mdc-radio__inner-circle"></div>
                    </div>
                  </div>
                </span>
                <label id="test-dialog-baseline-confirmation-radio-1-label"
                  for="test-dialog-baseline-confirmation-radio-1" class="mdc-list-item__text">None</label>
              </li>
              <!-- ... -->
            </ul>
          </div>
          <div class="mdc-dialog__actions">
            <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">
              <div class="mdc-button__ripple"></div>
              <span class="mdc-button__label">Cancel</span>
            </button>
            <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept">
              <div class="mdc-button__ripple"></div>
              <span class="mdc-button__label">OK</span>
            </button>
          </div>
        </div>
      </div>
      <div class="mdc-dialog__scrim"></div>
    </div>

    <button class="mdc-button" onclick="new mdc.dialog.MDCDialog(document.querySelector('#dialog3')).open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Confirmation dialog</span>
    </button>


    <h4>Full-screen dialog</h4>

    <!-- <div id="dialog4" class="mdc-dialog mdc-dialog--open mdc-dialog--fullscreen"> -->
    <div id="dialog4" class="mdc-dialog mdc-dialog--fullscreen">
      <div class="mdc-dialog__container">
        <div class="mdc-dialog__surface" role="dialog" aria-modal="true" aria-labelledby="my-dialog-title"
          aria-describedby="my-dialog-content">
          <div class="mdc-dialog__header">
            <h2 class="mdc-dialog__title" id="my-dialog-title">
              Full-Screen Dialog Title
            </h2>
            <button class="mdc-icon-button material-icons mdc-dialog__close" data-mdc-dialog-action="close">
              close
            </button>
          </div>
          <div class="mdc-dialog__content" id="my-dialog-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Sed scelerisque metus dapibus, maximus massa pulvinar, commodo nunc.
            Quisque vitae luctus lectus, ut tempus ipsum. Sed suscipit gravida scelerisque.
            Aenean vulputate elementum est, quis consectetur orci consectetur ac.
            Quisque accumsan vel nisi id dapibus. Suspendisse nec urna eu massa ornare rutrum.
            Vivamus at nisi sit amet nulla pretium volutpat sit amet in justo. Donec mi metus,
            interdum ac tincidunt at, vehicula vitae nisl. Morbi fermentum dapibus massa,
            nec lobortis massa vestibulum eu.
          </div>
          <div class="mdc-dialog__actions">
            <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="ok">
              <div class="mdc-button__ripple"></div>
              <span class="mdc-button__label">OK</span>
            </button>
          </div>
        </div>
      </div>
      <div class="mdc-dialog__scrim"></div>
    </div>

    <button class="mdc-button" onclick="new mdc.dialog.MDCDialog(document.querySelector('#dialog4')).open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Fullscreen dialog</span>
    </button>


    <h4>Banner</h4>

    <div id="banner1" class="mdc-banner" role="banner">
      <div class="mdc-banner__content" role="alertdialog" aria-live="assertive">
        <div class="mdc-banner__graphic-text-wrapper">
          <div class="mdc-banner__text">
            There was a problem processing a transaction on your credit card.
          </div>
        </div>
        <div class="mdc-banner__actions">
          <button type="button" class="mdc-button mdc-banner__primary-action">
            <div class="mdc-button__ripple"></div>
            <div class="mdc-button__label">Fix it</div>
          </button>
        </div>
      </div>
    </div>

    <button class="mdc-button" onclick="new mdc.banner.MDCBanner(document.querySelector('#banner1')).open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Banner dialog</span>
    </button>


    <h4>Fixed Banner</h4>

    <div id="banner2" class="mdc-banner" role="banner">
      <div class="mdc-banner__fixed">
        <div class="mdc-banner__content" role="alertdialog" aria-live="assertive">
          <div class="mdc-banner__graphic-text-wrapper">
            <div class="mdc-banner__text">
              There was a problem processing a transaction on your credit card.
            </div>
          </div>
          <div class="mdc-banner__actions">
            <button type="button" class="mdc-button mdc-banner__primary-action">
              <div class="mdc-button__ripple"></div>
              <div class="mdc-button__label">Fix it</div>
            </button>
          </div>
        </div>
      </div>
    </div>

    <button class="mdc-button" onclick="new mdc.banner.MDCBanner(document.querySelector('#banner2')).open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Fixed dialog</span>
    </button>



    <h4>Banner with graphic</h4>

    <div id="banner3" class="mdc-banner" role="banner">
      <div class="mdc-banner__content" role="alertdialog" aria-live="assertive">
        <div class="mdc-banner__graphic-text-wrapper">
          <div class="mdc-banner__graphic" role="img" alt=""><i
              class="material-icons mdc-banner__icon">error_outline</i></div>
          <div class="mdc-banner__text">
            There was a problem processing a transaction on your credit card.
          </div>
        </div>
        <div class="mdc-banner__actions">
          <button type="button" class="mdc-button mdc-banner__primary-action">
            <div class="mdc-button__ripple"></div>
            <div class="mdc-button__label">Fix it</div>
          </button>
        </div>
      </div>
    </div>

    <button class="mdc-button" onclick="new mdc.banner.MDCBanner(document.querySelector('#banner3')).open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Banner with graphic</span>
    </button>



    <h4>Banner with two actions</h4>

    <div id="banner4" class="mdc-banner" role="banner">
      <div class="mdc-banner__content" role="alertdialog" aria-live="assertive">
        <div class="mdc-banner__graphic-text-wrapper">
          <div class="mdc-banner__text">
            There was a problem processing a transaction on your credit card.
          </div>
        </div>
        <div class="mdc-banner__actions">
          <button type="button" class="mdc-button mdc-banner__secondary-action">
            <div class="mdc-button__ripple"></div>
            <div class="mdc-button__label">Learn more</div>
          </button>
          <button type="button" class="mdc-button mdc-banner__primary-action">
            <div class="mdc-button__ripple"></div>
            <div class="mdc-button__label">Fix it</div>
          </button>
        </div>
      </div>
    </div>

    <button class="mdc-button" onclick="new mdc.banner.MDCBanner(document.querySelector('#banner4')).open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Banner with two actions</span>
    </button>


    <h4>Standard Image List</h4>

    <ul class="mdc-image-list my-image-list">
      <li class="mdc-image-list__item">
        <div class="mdc-image-list__image-aspect-container">
          <img class="mdc-image-list__image" src="apple.png">
        </div>
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Label 1</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <div class="mdc-image-list__image-aspect-container">
          <img class="mdc-image-list__image" src="apple.png">
        </div>
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Label 2</span>
        </div>
      </li>
    </ul>



    <h4>Masonry Image List</h4>

    <ul class="mdc-image-list mdc-image-list--masonry my-masonry-image-list">
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="apple.png" style="width: 100px;">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Text 1</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="apple.png" style="width: 100px;">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Text 2</span>
        </div>
      </li>
    </ul>


    <h4>Single-line list</h4>

    <ul class="mdc-list">
      <li class="mdc-list-item" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
    </ul>


    <h4>Two-line list</h4>

    <ul class="mdc-list mdc-list--two-line">
      <li class="mdc-list-item" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">
          <span class="mdc-list-item__primary-text">Two-line item</span>
          <span class="mdc-list-item__secondary-text">Secondary text</span>
        </span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">
          <span class="mdc-list-item__primary-text">Two-line item</span>
          <span class="mdc-list-item__secondary-text">Secondary text</span>
        </span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">
          <span class="mdc-list-item__primary-text">Two-line item</span>
          <span class="mdc-list-item__secondary-text">Secondary text</span>
        </span>
      </li>
    </ul>


    <h4>List Groups</h4>

    <div class="mdc-list-group">
      <h3 class="mdc-list-group__subheader">List 1</h3>
      <ul class="mdc-list">
        <li class="mdc-list-item" tabindex="0">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">line item</span>
        </li>
        <li class="mdc-list-item">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">line item</span>
        </li>
        <li class="mdc-list-item">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">line item</span>
        </li>
      </ul>
      <h3 class="mdc-list-group__subheader">List 2</h3>
      <ul class="mdc-list">
        <li class="mdc-list-item">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">line item</span>
        </li>
        <li class="mdc-list-item">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">line item</span>
        </li>
        <li class="mdc-list-item">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">line item</span>
        </li>
      </ul>
    </div>


    <h4>List Dividers</h4>

    <ul class="mdc-list">
      <li class="mdc-list-item" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Item 1 - Division 1</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Item 2 - Division 1</span>
      </li>
      <li role="separator" class="mdc-list-divider"></li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Item 1 - Division 2</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Item 2 - Division 2</span>
      </li>
    </ul>


    <h4>List Dividers 2 </h4>

    <ul class="mdc-list">
      <li class="mdc-list-item" tabindex="0">
        <span class="mdc-list-item__text">Item 1 - List 1</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__text">Item 2 - List 1</span>
      </li>
    </ul>
    <hr class="mdc-list-divider">
    <ul class="mdc-list">
      <li class="mdc-list-item">
        <span class="mdc-list-item__text">Item 1 - List 2</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__text">Item 2 - List 2</span>
      </li>
    </ul>


    <h4>Single Selection List</h4>

    <ul id="my-list" class="mdc-list" role="listbox">
      <li class="mdc-list-item" role="option" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item" role="option">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item" role="option">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
    </ul>


    <h4>Pre-selected list item</h4>

    <ul id="my-list" class="mdc-list" role="listbox">
      <li class="mdc-list-item" role="option" aria-selected="false">
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item mdc-list-item--selected" role="option" aria-selected="true" tabindex="0">
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item" role="option" aria-selected="false">
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
    </ul>


    <h4>List with radio group</h4>

    <ul class="mdc-list" role="radiogroup">
      <li class="mdc-list-item" role="radio" aria-checked="false">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__graphic">
          <div class="mdc-radio">
            <input class="mdc-radio__native-control" type="radio" id="demo-list-radio-item-1"
              name="demo-list-radio-item-group" value="1">
            <div class="mdc-radio__background">
              <div class="mdc-radio__outer-circle"></div>
              <div class="mdc-radio__inner-circle"></div>
            </div>
          </div>
        </span>
        <label class="mdc-list-item__text" for="demo-list-radio-item-1">Option 1</label>
      </li>
      <li class="mdc-list-item" role="radio" aria-checked="true" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__graphic">
          <div class="mdc-radio">
            <input class="mdc-radio__native-control" type="radio" id="demo-list-radio-item-2"
              name="demo-list-radio-item-group" value="2" checked>
            <div class="mdc-radio__background">
              <div class="mdc-radio__outer-circle"></div>
              <div class="mdc-radio__inner-circle"></div>
            </div>
          </div>
        </span>
        <label class="mdc-list-item__text" for="demo-list-radio-item-2">Option 2</label>
      </li>
      <li class="mdc-list-item" role="radio" aria-checked="false">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__graphic">
          <div class="mdc-radio">
            <input class="mdc-radio__native-control" type="radio" id="demo-list-radio-item-3"
              name="demo-list-radio-item-group" value="3">
            <div class="mdc-radio__background">
              <div class="mdc-radio__outer-circle"></div>
              <div class="mdc-radio__inner-circle"></div>
            </div>
          </div>
        </span>
        <label class="mdc-list-item__text" for="demo-list-radio-item-3">Option 3</label>
      </li>
    </ul>


    <h4>List with checkbox items</h4>

    <ul class="mdc-list" role="group" aria-label="List with checkbox items">
      <li class="mdc-list-item" role="checkbox" aria-checked="false">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__graphic">
          <div class="mdc-checkbox">
            <input type="checkbox" class="mdc-checkbox__native-control" id="demo-list-checkbox-item-1" />
            <div class="mdc-checkbox__background">
              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
              </svg>
              <div class="mdc-checkbox__mixedmark"></div>
            </div>
          </div>
        </span>
        <label class="mdc-list-item__text" for="demo-list-checkbox-item-1">Option 1</label>
      </li>
      <li class="mdc-list-item" role="checkbox" aria-checked="true" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__graphic">
          <div class="mdc-checkbox">
            <input type="checkbox" class="mdc-checkbox__native-control" id="demo-list-checkbox-item-2" checked />
            <div class="mdc-checkbox__background">
              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
              </svg>
              <div class="mdc-checkbox__mixedmark"></div>
            </div>
          </div>
        </span>
        <label class="mdc-list-item__text" for="demo-list-checkbox-item-2">Option 2</label>
      </li>
      <li class="mdc-list-item" role="checkbox" aria-checked="false">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__graphic">
          <div class="mdc-checkbox">
            <input type="checkbox" class="mdc-checkbox__native-control" id="demo-list-checkbox-item-3" />
            <div class="mdc-checkbox__background">
              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
              </svg>
              <div class="mdc-checkbox__mixedmark"></div>
            </div>
          </div>
        </span>
        <label class="mdc-list-item__text" for="demo-list-checkbox-item-3">Option 3</label>
      </li>
    </ul>


    <script>
      for (const el of document.querySelectorAll('.mdc-list')) {
        const list = new mdc.list.MDCList(el)
        const listItemRipples = list.listElements.map((listItemEl) => new mdc.ripple.MDCRipple(listItemEl))
      }
    </script>


    <h4>Basic Menu</h4>

    <div id=menu1 class="mdc-menu mdc-menu-surface">
      <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
        <li class="mdc-list-item" role="menuitem">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">A Menu Item</span>
        </li>
        <li class="mdc-list-item" role="menuitem">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">Another Menu Item</span>
        </li>
      </ul>
    </div>

    <div class="mdc-touch-target-wrapper" onclick="new mdc.menu.MDCMenu(document.querySelector('#menu1')).open = true">
      <button class="mdc-button mdc-button--touch">
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show menu</span>
      </button>
    </div>


    <h4>Selection Group Menu</h4>

    <div id=menu2 class="mdc-menu mdc-menu-surface" id="demo-menu">
      <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
        <li>
          <ul class="mdc-menu__selection-group">
            <li class="mdc-list-item" role="menuitem">
              <span class="mdc-list-item__ripple"></span>
              <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
                ...
              </span>
              <span class="mdc-list-item__text">Single</span>
            </li>
            <li class="mdc-list-item" role="menuitem">
              <span class="mdc-list-item__ripple"></span>
              <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
                ...
              </span>
              <span class="mdc-list-item__text">1.15</span>
            </li>
          </ul>
        </li>
        <li class="mdc-list-divider" role="separator"></li>
        <li class="mdc-list-item" role="menuitem">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">Add space before paragraph</span>
        </li>
        <!-- ... -->
      </ul>
    </div>

    <div class="mdc-touch-target-wrapper" onclick="new mdc.menu.MDCMenu(document.querySelector('#menu2')).open = true">
      <button class="mdc-button mdc-button--touch">
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show menu</span>
      </button>
    </div>


    <h4>Anchored To Parent</h4>

    <div class="toolbar mdc-menu-surface--anchor mdc-touch-target-wrapper">

      <button class="mdc-button mdc-button--touch"
        onclick="new mdc.menu.MDCMenu(document.querySelector('#menu3')).open = true">
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show menu</span>
      </button>

      <div id=menu3 class="mdc-menu mdc-menu-surface">
        <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
          <li class="mdc-list-item" role="menuitem">
            <span class="mdc-list-item__ripple"></span>
            <span class="mdc-list-item__text">A Menu Item</span>
          </li>
          <li class="mdc-list-item" role="menuitem">
            <span class="mdc-list-item__ripple"></span>
            <span class="mdc-list-item__text">Another Menu Item</span>
          </li>
        </ul>
      </div>
    </div>

    <h4>Anchor To Element Within Wrapper</h4>

    <div class="mdc-menu-surface--anchor mdc-touch-target-wrapper">

      <button class="mdc-button mdc-button--touch"
        onclick="menu = new mdc.menu.MDCMenu(document.querySelector('#menu4')); menu.open = true; menu.setFixedPosition(true)">
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show Menu with Fixed Position</span>
      </button>

      <button class="mdc-button mdc-button--touch"
        onclick="menu = new mdc.menu.MDCMenu(document.querySelector('#menu4')); menu.open = true; menu.setAbsolutePosition(100, 100)">
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show Menu with Absolute Position</span>
      </button>

      <div id=menu4 class="mdc-menu mdc-menu-surface">
        <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
          <li class="mdc-list-item" role="menuitem">
            <span class="mdc-list-item__ripple"></span>
            <span class="mdc-list-item__text">A Menu Item</span>
          </li>
          <li class="mdc-list-item" role="menuitem">
            <span class="mdc-list-item__ripple"></span>
            <span class="mdc-list-item__text">Another Menu Item</span>
          </li>
        </ul>
      </div>

    </div>



    <h4>Standard navigation drawers</h4>

    <aside class="mdc-drawer" id="mdc-drawer1">
      <div class="mdc-drawer__content">
        <nav class="mdc-list" id='mdc-list1'>
          <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
            <span class="mdc-list-item__text">Inbox</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
            <span class="mdc-list-item__text">Outgoing</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
            <span class="mdc-list-item__text">Drafts</span>
          </a>
        </nav>
      </div>
    </aside>



    <h4>Dismissible Modal drawers</h4>

    <div class="mdc-touch-target-wrapper">
      <button class="mdc-button mdc-button--touch" id='mdc-button2'>
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show drawer</span>
      </button>
    </div>

    <script>
      let mdc_list2 = mdc.list.MDCList.attachTo(document.querySelector('#mdc-list2'))
      mdc_list2.wrapFocus = true
      let mdc_drawer2 = mdc.drawer.MDCDrawer.attachTo(document.querySelector('#mdc-drawer2'))
      let mdc_button2 = document.querySelector('#mdc-button2')
      mdc_button2.onclick = (ev) => { mdc_drawer2.open = true }

      mdc_drawer2.onclick = () => { mdc_drawer2.open = false; mdc_button1.focus() } // dismiss

      document.body.addEventListener('MDCDrawer:closed', () => {
        mdc_button2.focus();
      });
    </script>

    <h4>Drawer with separate list groups</h4>

    <aside class="mdc-drawer">
      <div class="mdc-drawer__content">
        <nav class="mdc-list">
          <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
            <span class="mdc-list-item__text">Inbox</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
            <span class="mdc-list-item__text">Star</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
            <span class="mdc-list-item__text">Sent Mail</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
            <span class="mdc-list-item__text">Drafts</span>
          </a>

          <hr class="mdc-list-divider">
          <h6 class="mdc-list-group__subheader">Labels</h6>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
            <span class="mdc-list-item__text">Family</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
            <span class="mdc-list-item__text">Friends</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
            <span class="mdc-list-item__text">Work</span>
          </a>
        </nav>
      </div>
    </aside>


    <h4>Drawer with header</h4>

    <aside class="mdc-drawer">
      <div class="mdc-drawer__header">
        <h3 class="mdc-drawer__title">Mail</h3>
        <h6 class="mdc-drawer__subtitle">email@material.io</h6>
      </div>
      <div class="mdc-drawer__content">
        <nav class="mdc-list">
          <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
            <span class="mdc-list-item__text">Inbox</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
            <span class="mdc-list-item__text">Outgoing</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
            <span class="mdc-list-item__text">Drafts</span>
          </a>
        </nav>
      </div>
    </aside>


    <script>
      for (const selector of ['.mdc-drawer--dismissible', '.mdc-drawer--modal']) {
        for (const el of document.querySelectorAll(selector)) {
          const drawer = mdc.drawer.MDCDrawer.attachTo(el)
        }
      }
    </script>



    <h4>radio buttons</h4>

    <div class="mdc-touch-target-wrapper">
      <div class="mdc-radio mdc-radio--touch">
        <input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
        <div class="mdc-radio__ripple"></div>
      </div>
    </div>

    <script>
      for (const el of document.querySelectorAll('.mdc-radio')) {
        const tooltip = new mdc.radio.MDCRadio(el)
      }
    </script>


    <h4>Radio button</h4>

    <div class="mdc-form-field">
      <div class="mdc-radio">
        <input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
        <div class="mdc-radio__ripple"></div>
      </div>
      <label for="radio-1">Radio 1</label>
    </div>


    <h4>Disabled radio buttons</h4>

    <div class="mdc-form-field">
      <div class="mdc-radio mdc-radio--disabled">
        <input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" disabled>
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
        <div class="mdc-radio__ripple"></div>
      </div>
      <label for="radio-1">Radio 1</label>
    </div>

    <script>
      for (const el of document.querySelectorAll('.mdc-form-field')) {
        const tooltip = new mdc.formField.MDCFormField(el)
      }
  // formField.input = radio
    </script>

    <h4>Continuous slider</h4>

    <div class="mdc-slider">
      <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume"
        aria-label="Continuous slider demo">
      <div class="mdc-slider__track">
        <div class="mdc-slider__track--inactive"></div>
        <div class="mdc-slider__track--active">
          <div class="mdc-slider__track--active_fill"></div>
        </div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__thumb-knob"></div>
      </div>
    </div>

    <script>
      const slider = new mdc.slider.MDCSlider(document.querySelector('.mdc-slider'))
    </script>


    <h4>Continuous range slider</h4>

    <div class="mdc-slider mdc-slider--range" id="mdc-slider2">
      <input class="mdc-slider__input" type="range" min="0" max="70" value="30" name="rangeStart"
        aria-label="Continuous range slider demo">
      <input class="mdc-slider__input" type="range" min="30" max="100" value="70" name="rangeEnd"
        aria-label="Continuous range slider demo">
      <div class="mdc-slider__track">
        <div class="mdc-slider__track--inactive"></div>
        <div class="mdc-slider__track--active">
          <div class="mdc-slider__track--active_fill"></div>
        </div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__thumb-knob"></div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__thumb-knob"></div>
      </div>
    </div>

    <script>
      const slider2 = new mdc.slider.MDCSlider(document.querySelector('#mdc-slider2'))
    </script>


    <h4>Discrete slider</h4>

    <div class="mdc-slider mdc-slider--discrete" id="mdc-slider3">
      <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" step="10"
        aria-label="Discrete slider demo">
      <div class="mdc-slider__track">
        <div class="mdc-slider__track--inactive"></div>
        <div class="mdc-slider__track--active">
          <div class="mdc-slider__track--active_fill"></div>
        </div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__value-indicator-container" aria-hidden="true">
          <div class="mdc-slider__value-indicator">
            <span class="mdc-slider__value-indicator-text">
              50
            </span>
          </div>
        </div>
        <div class="mdc-slider__thumb-knob"></div>
      </div>
    </div>

    <script>
      const slider3 = new mdc.slider.MDCSlider(document.querySelector('#mdc-slider3'))
    </script>


    <h4>Discrete slider with tick marks</h4>

    <div class="mdc-slider mdc-slider--discrete mdc-slider--tick-marks" id="mdc-slider4">
      <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" step="10"
        aria-label="Discrete slider with tick marks demo">
      <div class="mdc-slider__track">
        <div class="mdc-slider__track--inactive"></div>
        <div class="mdc-slider__track--active">
          <div class="mdc-slider__track--active_fill"></div>
        </div>
        <div class="mdc-slider__tick-marks">
          <div class="mdc-slider__tick-mark--active"></div>
          <div class="mdc-slider__tick-mark--active"></div>
          <div class="mdc-slider__tick-mark--active"></div>
          <div class="mdc-slider__tick-mark--active"></div>
          <div class="mdc-slider__tick-mark--active"></div>
          <div class="mdc-slider__tick-mark--active"></div>
          <div class="mdc-slider__tick-mark--inactive"></div>
          <div class="mdc-slider__tick-mark--inactive"></div>
          <div class="mdc-slider__tick-mark--inactive"></div>
          <div class="mdc-slider__tick-mark--inactive"></div>
          <div class="mdc-slider__tick-mark--inactive"></div>
        </div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__value-indicator-container" aria-hidden="true">
          <div class="mdc-slider__value-indicator">
            <span class="mdc-slider__value-indicator-text">
              50
            </span>
          </div>
        </div>
        <div class="mdc-slider__thumb-knob"></div>
      </div>
    </div>

    <script>
      const slider4 = new mdc.slider.MDCSlider(document.querySelector('#mdc-slider4'))
    </script>


    <h4>Discrete range slider</h4>

    <div class="mdc-slider mdc-slider--range mdc-slider--discrete" id="mdc-slider5">
      <input class="mdc-slider__input" type="range" min="0" max="50" value="20" step="10" name="rangeStart"
        aria-label="Discrete range slider demo">
      <input class="mdc-slider__input" type="range" min="20" max="100" value="50" step="10" name="rangeEnd"
        aria-label="Discrete range slider demo">
      <div class="mdc-slider__track">
        <div class="mdc-slider__track--inactive"></div>
        <div class="mdc-slider__track--active">
          <div class="mdc-slider__track--active_fill"></div>
        </div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__value-indicator-container" aria-hidden="true">
          <div class="mdc-slider__value-indicator">
            <span class="mdc-slider__value-indicator-text">
              20
            </span>
          </div>
        </div>
        <div class="mdc-slider__thumb-knob"></div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__value-indicator-container" aria-hidden="true">
          <div class="mdc-slider__value-indicator">
            <span class="mdc-slider__value-indicator-text">
              50
            </span>
          </div>
        </div>
        <div class="mdc-slider__thumb-knob"></div>
      </div>
    </div>

    <script>
      const slider5 = new mdc.slider.MDCSlider(document.querySelector('#mdc-slider5'))
    </script>


    <h4>Disabled slider</h4>

    <div class="mdc-slider mdc-slider--disabled" id="mdc-slider6">
      <input class="mdc-slider__input" type="range" min="0" max="100" value="50" step="10" disabled name="volume"
        aria-label="Disabled slider demo">
      <div class="mdc-slider__track">
        <div class="mdc-slider__track--inactive"></div>
        <div class="mdc-slider__track--active">
          <div class="mdc-slider__track--active_fill"></div>
        </div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__thumb-knob"></div>
      </div>
    </div>

    <script>
      const slider6 = new mdc.slider.MDCSlider(document.querySelector('#mdc-slider6'))
    </script>


    <h4>Snackbars</h4>

    <aside class="mdc-snackbar">
      <div class="mdc-snackbar__surface" role="status" aria-relevant="additions">
        <div class="mdc-snackbar__label" aria-atomic="false">
          Can't send photo. Retry in 5 seconds.
        </div>
        <div class="mdc-snackbar__actions" aria-atomic="true">
          <button type="button" class="mdc-button mdc-snackbar__action">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">Retry</span>
          </button>
        </div>
      </div>
    </aside>

    <div class="mdc-touch-target-wrapper">
      <button class="mdc-button mdc-button--touch" id='snackbar-button1'>
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show snackbar</span>
      </button>
    </div>

    <script>
      const snackbar = new mdc.snackbar.MDCSnackbar(document.querySelector('.mdc-snackbar'))
      const snackbar_button1 = document.querySelector('#snackbar-button1')
      snackbar_button1.onclick = (ev) => snackbar.open()
    </script>


    <h4>Snackbars Stacked</h4>

    <aside class="mdc-snackbar mdc-snackbar--stacked" id="mdc-snackbar2">
      <div class="mdc-snackbar__surface" role="status" aria-relevant="additions">
        <div class="mdc-snackbar__label" aria-atomic="false">
          Can't send photo. Retry in 5 seconds.
        </div>
        <div class="mdc-snackbar__actions" aria-atomic="true">
          <button type="button" class="mdc-button mdc-snackbar__action">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">Retry</span>
          </button>
        </div>
      </div>
    </aside>

    <div class="mdc-touch-target-wrapper">
      <button class="mdc-button mdc-button--touch" id='snackbar-button2'>
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show snackbar</span>
      </button>
    </div>

    <script>
      const snackbar2 = new mdc.snackbar.MDCSnackbar(document.querySelector('#mdc-snackbar2'))
      const snackbar_button2 = document.querySelector('#snackbar-button2')
      snackbar_button2.onclick = (ev) => snackbar2.open()
    </script>


    <h4>Snackbars Leading</h4>

    <aside class="mdc-snackbar mdc-snackbar--leading" id="mdc-snackbar3">
      <div class="mdc-snackbar__surface" role="status" aria-relevant="additions">
        <div class="mdc-snackbar__label" aria-atomic="false">
          Can't send photo. Retry in 5 seconds.
        </div>
        <div class="mdc-snackbar__actions" aria-atomic="true">
          <button type="button" class="mdc-button mdc-snackbar__action">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">Retry</span>
          </button>
        </div>
      </div>
    </aside>

    <div class="mdc-touch-target-wrapper">
      <button class="mdc-button mdc-button--touch" id='snackbar-button3'>
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show snackbar</span>
      </button>
    </div>

    <script>
      const snackbar3 = new mdc.snackbar.MDCSnackbar(document.querySelector('#mdc-snackbar3'))
      const snackbar_button3 = document.querySelector('#snackbar-button3')
      snackbar_button3.onclick = (ev) => snackbar3.open()
    </script>


    <h4>Switches</h4>

    <button id="basic-switch" class="mdc-switch mdc-switch--unselected" type="button" role="switch"
      aria-checked="false">
      <div class="mdc-switch__track"></div>
      <div class="mdc-switch__handle-track">
        <div class="mdc-switch__handle">
          <div class="mdc-switch__shadow">
            <div class="mdc-elevation-overlay"></div>
          </div>
          <div class="mdc-switch__ripple"></div>
          <div class="mdc-switch__icons">
            <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
              <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
            </svg>
            <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
              <path d="M20 13H4v-2h16v2z" />
            </svg>
          </div>
        </div>
      </div>
    </button>
    <label for="basic-switch">off/on</label>

    <button id="selected-switch" class="mdc-switch mdc-switch--selected" type="button" role="switch"
      aria-checked="true">
      <div class="mdc-switch__track"></div>
      <div class="mdc-switch__handle-track">
        <div class="mdc-switch__handle">
          <div class="mdc-switch__shadow">
            <div class="mdc-elevation-overlay"></div>
          </div>
          <div class="mdc-switch__ripple"></div>
          <div class="mdc-switch__icons">
            <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
              <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
            </svg>
            <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
              <path d="M20 13H4v-2h16v2z" />
            </svg>
          </div>
        </div>
      </div>
    </button>
    <label for="selected-switch">off/on</label>

    <button id="disabled-switch" class="mdc-switch mdc-switch--unselected" type="button" role="switch"
      aria-checked="false" disabled>
      <div class="mdc-switch__track"></div>
      <div class="mdc-switch__handle-track">
        <div class="mdc-switch__handle">
          <div class="mdc-switch__shadow">
            <div class="mdc-elevation-overlay"></div>
          </div>
          <div class="mdc-switch__ripple"></div>
          <div class="mdc-switch__icons">
            <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
              <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
            </svg>
            <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
              <path d="M20 13H4v-2h16v2z" />
            </svg>
          </div>
        </div>
      </div>
    </button>
    <label for="disabled-switch">off/on</label>

    <script>
      for (const el of document.querySelectorAll('.mdc-switch')) {
        const switchControl = new mdc.switchControl.MDCSwitch(el);
      }
    </script>


    <h4>Tabs</h4>

    <div class="mdc-tab-bar" role="tablist">
      <div class="mdc-tab-scroller">
        <div class="mdc-tab-scroller__scroll-area">
          <div class="mdc-tab-scroller__scroll-content">
            <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
              <span class="mdc-tab__content">
                <span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
                <span class="mdc-tab__text-label">Favorites</span>
              </span>
              <span class="mdc-tab-indicator mdc-tab-indicator--active">
                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
              </span>
              <span class="mdc-tab__ripple"></span>
            </button>
            <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="false" tabindex="1">
              <span class="mdc-tab__content">
                <span class="mdc-tab__icon material-icons" aria-hidden="true">search</span>
                <span class="mdc-tab__text-label">Implementation</span>
              </span>
              <span class="mdc-tab-indicator mdc-tab-indicator--active">
                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
              </span>
              <span class="mdc-tab__ripple"></span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <script>
      for (const el of document.querySelectorAll('.mdc-tab-bar')) {
        const tabBar = new mdc.tabBar.MDCTabBar(el);
      }
    </script>


    <h4>text fields</h4>

    <label class="mdc-text-field mdc-text-field--filled">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label" id="my-label-id">Hint text</span>
      <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
      <span class="mdc-line-ripple"></span>
    </label>

    <h4>Outlined text</h4>

    <label class="mdc-text-field mdc-text-field--outlined">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__notch">
          <span class="mdc-floating-label" id="my-label-id">Outlined text</span>
        </span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
      <input type="text" class="mdc-text-field__input" aria-labelledby="my-label-id">
    </label>

    <h4>Textarea</h4>

    <label class="mdc-text-field mdc-text-field--filled mdc-text-field--textarea mdc-text-field--no-label">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-text-field__resizer">
        <textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
      </span>
      <span class="mdc-line-ripple"></span>
    </label>

    <h4>Textarea Outlined</h4>

    <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--no-label">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
      <span class="mdc-text-field__resizer">
        <textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
      </span>
    </label>

    <h4>Text field without label: Filled</h4>

    <label class="mdc-text-field mdc-text-field--filled mdc-text-field--no-label">
      <span class="mdc-text-field__ripple"></span>
      <input class="mdc-text-field__input" type="text" placeholder="Placeholder text" aria-label="Label">
      <span class="mdc-line-ripple"></span>
    </label>

    <h4>Text field without label: Outlined</h4>

    <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
      <input class="mdc-text-field__input" type="text" aria-label="Label">
    </label>

    <h4>Text field without label: Textarea</h4>

    <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--no-label">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
      <span class="mdc-text-field__resizer">
        <textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
      </span>
    </label>

    <h4>Disabled text field</h4>

    <label class="mdc-text-field mdc-text-field--filled mdc-text-field--disabled">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label" id="my-label-id">Disabled text field</span>
      <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" disabled>
      <span class="mdc-line-ripple"></span>
    </label>

    <h4>Text field with helper text</h4>

    <label class="mdc-text-field mdc-text-field--filled">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label" id="my-label-id">My Label</span>
      <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" aria-controls="my-helper-id"
        aria-describedby="my-helper-id">
      <span class="mdc-line-ripple"></span>
    </label>
    <div class="mdc-text-field-helper-line">
      <div class="mdc-text-field-helper-text" id="my-helper-id" aria-hidden="true">helper text</div>
    </div>

    <h4>Text field with character counter</h4>

    <label class="mdc-text-field mdc-text-field--filled">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label" id="my-label-id">My Label</span>
      <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" maxlength="10">
      <span class="mdc-line-ripple"></span>
    </label>
    <div class="mdc-text-field-helper-line">
      <div class="mdc-text-field-character-counter">0 / 10</div>
    </div>

    <h4>Multi-line text field (textarea) with character counter</h4>

    <label class="mdc-text-field mdc-text-field--textarea">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__notch">
          <span class="mdc-floating-label" id="my-label-id">Textarea Label</span>
        </span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
      <span class="mdc-text-field__resizer">
        <textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8" cols="40"
          maxlength="140"></textarea>
      </span>
    </label>
    <div class="mdc-text-field-helper-line">
      <div class="mdc-text-field-character-counter">0 / 140</div>
    </div>

    <h4>Multi-line text field (textarea) with character counter 2</h4>

    <label
      class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--with-internal-counter">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__notch">
          <span class="mdc-floating-label" id="my-label-id">Textarea Label</span>
        </span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
      <span class="mdc-text-field__resizer">
        <textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8" cols="40"
          maxlength="140"></textarea>
        <span class="mdc-text-field-character-counter">0 / 140</span>
      </span>
    </label>

    <h4>Text field with prefix and suffix text</h4>

    <label class="mdc-text-field mdc-text-field--filled">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label" id="my-label-id">Currency Value</span>
      <span class="mdc-text-field__affix mdc-text-field__affix--prefix">$</span>
      <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
      <span class="mdc-text-field__affix mdc-text-field__affix--suffix">.00</span>
      <span class="mdc-line-ripple"></span>
    </label>

    <h4>HTML5 validation</h4>

    <label class="mdc-text-field mdc-text-field--filled">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label" id="my-label-id">Password</span>
      <input class="mdc-text-field__input" type="password" aria-labelledby="my-label-id" required minlength="8">
      <span class="mdc-line-ripple"></span>
    </label>

    <h4>Pre-filled</h4>

    <label class="mdc-text-field mdc-text-field--filled mdc-text-field--label-floating">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label mdc-floating-label--float-above" id="my-label-id">
        Label in correct place
      </span>
      <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" value="Pre-filled value">
      <span class="mdc-line-ripple"></span>
    </label>

    <h4>Baseline alignment</h4>

    <div>
      <label class="mdc-text-field mdc-text-field--outlined">
        <span class="mdc-notched-outline">
          <span class="mdc-notched-outline__leading"></span>
          <span class="mdc-notched-outline__trailing"></span>
        </span>
        <input type="text" class="mdc-text-field__input" value="Baseline">
      </label>
      <span>Text that is aligned with the text field's value</span>
    </div>

    <div style="display: flex; flex-direction: row; align-items: flex-end;">
      <label class="mdc-text-field mdc-text-field--outlined">
        <span class="mdc-notched-outline">
          <span class="mdc-notched-outline__leading"></span>
          <span class="mdc-notched-outline__trailing"></span>
        </span>
        <input type="text" class="mdc-text-field__input" value="Baseline">
      </label>
      <span>Text that is aligned to the bottom of the text field's outline</span>
    </div>

    <script>
      for (const el of document.querySelectorAll('.mdc-text-field')) {
        const textfield = new mdc.textField.MDCTextField(el);
      }
    </script>


    <h4>Tooltips</h4>

    <div id="tooltip-id" class="mdc-tooltip" role="tooltip" aria-hidden="true">
      <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
        lorem ipsum dolor
      </div>
    </div>

    <a aria-describedby="tooltip-id" href="www.google.com"> Link </a>

    <h4>Rich tooltip</h4>

    <div class="mdc-tooltip-wrapper--rich">
      <button class="mdc-button" aria-describedby="tt0">
        <div class="mdc-button__ripple"></div>
        <span class="mdc-button__label">Button</span>
      </button>
      <div id="tt0" class="mdc-tooltip mdc-tooltip--rich" aria-hidden="true" role="tooltip">
        <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
          <p class="mdc-tooltip__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
            pretium vitae est et dapibus. Aenean sit amet felis eu lorem fermentum
            aliquam sit amet sit amet eros.
          </p>
        </div>
      </div>
    </div>

    <h4>Default rich tooltip with interactive content</h4>

    <div class="mdc-tooltip-wrapper--rich">
      <button class="mdc-button" data-tooltip-id="tt1" aria-haspopup="dialog" aria-expanded="false">
        <div class="mdc-button__ripple"></div>
        <span class="mdc-button__label">Button</span>
      </button>
      <div id="tt1" class="mdc-tooltip mdc-tooltip--rich" aria-hidden="true" role="dialog">
        <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
          <h2 class="mdc-tooltip__title"> Lorem Ipsum </h2>
          <p class="mdc-tooltip__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
            pretium vitae est et dapibus. Aenean sit amet felis eu lorem fermentum
            aliquam sit amet sit amet eros.
            <a class="mdc-tooltip__content-link" href="google.com">link</a>
          </p>
          <div class="mdc-tooltip--rich-actions">
            <button class="mdc-tooltip__action" aria-label="action">
              action
            </button>
          </div>
        </div>
      </div>
    </div>

    <h4>Persistent rich tooltip with interactive content</h4>

    <div class="mdc-tooltip-wrapper--rich">
      <button class="mdc-button" data-tooltip-id="tt2" aria-haspopup="dialog" aria-expanded="false">
        <div class="mdc-button__ripple"></div>
        <span class="mdc-button__label">Button</span>
      </button>
      <div id="tt2" class="mdc-tooltip mdc-tooltip--rich" aria-hidden="true" tabindex="-1"
        data-mdc-tooltip-persistent="true" role="dialog">
        <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
          <h2 class="mdc-tooltip__title"> Lorem Ipsum </h2>
          <p class="mdc-tooltip__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
            pretium vitae est et dapibus. Aenean sit amet felis eu lorem fermentum
            aliquam sit amet sit amet eros.
            <a class="mdc-tooltip__content-link" href="google.com">link</a>
          </p>
          <div class="mdc-tooltip--rich-actions">
            <button class="mdc-tooltip__action" aria-label="action">
              action
            </button>
          </div>
        </div>
      </div>
    </div>


    <h4></h4>

    <button class="mdc-icon-button material-icons" aria-label="toggle favorite" data-tooltip-id="tt3"
      data-hide-tooltip-from-screenreader="true">
      favorite
    </button>

    <div id="tt3" class="mdc-tooltip" role="tooltip" aria-hidden="true">
      <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
        toggle favorite
      </div>
    </div>



    <script>
      for (const el of document.querySelectorAll('.mdc-tooltip')) {
        const tooltip = new mdc.tooltip.MDCTooltip(el)
      }

      for (const selector of ['.mdc-button', '.mdc-icon-button', '.mdc-card__primary-action']) {
        for (const el of document.querySelectorAll(selector)) {
          const ripple = new mdc.ripple.MDCRipple(el);
        }
      }

    </script>


  </main> <!-- app-bar-top -->

</body>

</html>


<body>

  <!-- mdc drawer 2 -->

  <aside class="mdc-drawer mdc-drawer--modal" id="mdc-drawer2">
    <div class="mdc-drawer__content">
      <nav class="mdc-list" id="mdc-list2">
        <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page" tabindex="0">
          <span class="mdc-list-item__ripple"></span>
          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
          <span class="mdc-list-item__text">Inbox</span>
        </a>
        <a class="mdc-list-item" href="#">
          <span class="mdc-list-item__ripple"></span>
          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
          <span class="mdc-list-item__text">Outgoing</span>
        </a>
        <a class="mdc-list-item" href="#">
          <span class="mdc-list-item__ripple"></span>
          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
          <span class="mdc-list-item__text">Drafts</span>
        </a>
      </nav>
    </div>
  </aside>

  <div class="mdc-drawer-scrim"></div>


  <!-- 
<header class="mdc-top-app-bar">
  <div class="mdc-top-app-bar__row">
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
      <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" aria-label="Open navigation menu">menu</button>
      <span class="mdc-top-app-bar__title">Regular top app bar</span>
    </section>
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Favorite">favorite</button>
      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Search">search</button>
      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Options">more_vert</button>
    </section>
  </div>
</header>
<main class="mdc-top-app-bar--fixed-adjust">
 -->


  <!-- 
<header class="mdc-top-app-bar">
  <div class="mdc-top-app-bar__row">
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
      <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" aria-label="Close">close</button>
      <span class="mdc-top-app-bar__title">Contextual action bar</span>
    </section>
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Share">share</button>
      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Delete">delete</button>
      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Open menu">more_vert</button>
    </section>
  </div>
</header>
<main class="mdc-top-app-bar--fixed-adjust">
 -->


  <!-- <header class="mdc-top-app-bar mdc-top-app-bar--short">
  <div class="mdc-top-app-bar__row">
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
      <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
      <span class="mdc-top-app-bar__title">Short top app bars are top app bars that can collapse to the navigation icon side when scrolled</span>
    </section>
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
    </section>
  </div>
</header>
<main class="mdc-top-app-bar--short-fixed-adjust">
 -->


  <!-- 
<header class="mdc-top-app-bar mdc-top-app-bar--short mdc-top-app-bar--short-collapsed">
  <div class="mdc-top-app-bar__row">
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
      <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
      <span class="mdc-top-app-bar__title">Short top app bars can be configured to always appear collapsed</span>
    </section>
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
    </section>
  </div>
</header>
<main class="mdc-top-app-bar--short-fixed-adjust">

 -->


  <header class="mdc-top-app-bar mdc-top-app-bar--fixed">
    <div class="mdc-top-app-bar__row">
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
        <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
        <span class="mdc-top-app-bar__title">Fixed top app bars stay at the top of the page and elevate above the
          content when scrolled</span>
      </section>
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
        <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button"
          aria-label="Bookmark this page">bookmark</button>
      </section>
    </div>
  </header>
  <main class="mdc-top-app-bar--fixed-adjust">


    <!-- 
<header class="mdc-top-app-bar mdc-top-app-bar--prominent">
  <div class="mdc-top-app-bar__row">
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
      <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
      <span class="mdc-top-app-bar__title">The prominent top app bar is taller</span>
    </section>
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
    </section>
  </div>
</header>
<main class="mdc-top-app-bar--prominent-fixed-adjust">
 -->

    <!-- 
<header class="mdc-top-app-bar mdc-top-app-bar--dense">
  <div class="mdc-top-app-bar__row">
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
      <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
      <span class="mdc-top-app-bar__title">The dense top app bar is shorter</span>
    </section>
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
    </section>
  </div>
</header>
<main class="mdc-top-app-bar--dense-fixed-adjust">
 -->

    <script>
      for (const el of document.querySelectorAll('.mdc-top-app-bar')) {
        const topAppBar = new mdc.topAppBar.MDCTopAppBar(el);
      }
    </script>


    <h4>buttons</h4>

    <div class="mdc-touch-target-wrapper">
      <button class="mdc-button mdc-button--touch">
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">My Button</span>
      </button>
    </div>


    <h4>Text button</h4>

    <button class="mdc-button">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Text Button</span>
    </button>


    <h4>Text button with icon</h4>

    <button class="mdc-button mdc-button--icon-leading">
      <span class="mdc-button__ripple"></span>
      <i class="material-icons mdc-button__icon" aria-hidden="true">bookmark</i>
      <span class="mdc-button__label">Text Button plus icon</span>
    </button>


    <h4>Outlined button</h4>

    <button class="mdc-button mdc-button--outlined">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Outlined Button</span>
    </button>


    <h4>Outlined button with icon</h4>

    <button class="mdc-button mdc-button--outlined mdc-button--icon-leading">
      <span class="mdc-button__ripple"></span>
      <i class="material-icons mdc-button__icon" aria-hidden="true">bookmark</i>
      <span class="mdc-button__label">Outlined Button plus Icon</span>
    </button>


    <h4>Contained button</h4>

    <button class="mdc-button mdc-button--raised">
      <span class="mdc-button__label">Contained Button</span>
    </button>


    <h4>Contained button with icon</h4>

    <button class="mdc-button mdc-button--raised mdc-button--leading">
      <span class="mdc-button__ripple"></span>
      <i class="material-icons mdc-button__icon" aria-hidden="true">bookmark</i>
      <span class="mdc-button__label">Contained Button plus Icon</span>
    </button>


    <h4>To add an icon</h4>

    <button class="mdc-button">
      <span class="mdc-button__ripple"></span>
      <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
      <span class="mdc-button__label">Button</span>
    </button>


    <h4>use an SVG icon</h4>

    <button class="mdc-button">
      <span class="mdc-button__ripple"></span>
      <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
        <rect x=0 y=0 width=10 height=10 fill=green></rect>
      </svg>
      <span class="mdc-button__label">Button</span>
    </button>


    <h4>Trailing Icon</h4>

    <button class="mdc-button mdc-button--icon-trailing">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Button</span>
      <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
    </button>


    <h4>Disabled</h4>

    <button class="mdc-button" disabled>
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Button</span>
    </button>



    <h4> FAB (floating action button)</h4>

    <div class="mdc-touch-target-wrapper">
      <button class="mdc-fab mdc-fab--mini mdc-fab--touch">
        <div class="mdc-fab__ripple"></div>
        <span class="material-icons mdc-fab__icon">add</span>
        <div class="mdc-fab__touch"></div>
      </button>
    </div>


    <h4>Regular FAB example</h4>

    <button class="mdc-fab" aria-label="Favorite">
      <div class="mdc-fab__ripple"></div>
      <span class="mdc-fab__icon material-icons">favorite</span>
    </button>


    <h4>Mini FAB example</h4>

    <button class="mdc-fab mdc-fab--mini" aria-label="Favorite">
      <div class="mdc-fab__ripple"></div>
      <span class="mdc-fab__icon material-icons">favorite</span>
    </button>


    <h4>Extended FAB example</h4>

    <button class="mdc-fab mdc-fab--extended">
      <div class="mdc-fab__ripple"></div>
      <span class="material-icons mdc-fab__icon">add</span>
      <span class="mdc-fab__label">Create</span>
    </button>

    <script>
      for (const el of document.querySelectorAll('.mdc-fab')) {
        const tooltip = new mdc.ripple.MDCRipple(el);
      }
    </script>


    <h4>Cards</h4>

    <div class="mdc-card" style="width: 350px; height: 150px;">
      <div class="mdc-card__actions">
        <button class="mdc-button mdc-card__action mdc-card__action--button">
          <div class="mdc-button__ripple"></div>
          <span class="mdc-button__label">Action 1</span>
        </button>
        <button class="mdc-button mdc-card__action mdc-card__action--button">
          <div class="mdc-button__ripple"></div>
          <span class="mdc-button__label">Action 2</span>
        </button>
      </div>
    </div>


    <h4>Outlined card with icon buttons</h4>

    <div class="mdc-card mdc-card--outlined" style="width: 350px; height: 150px;">
      <div class="mdc-card__actions">
        <button class="mdc-icon-button mdc-card__action mdc-card__action--icon" aria-pressed="false"
          aria-label="Add to favorites" title="Add to favorites">
          <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
          <i class="material-icons mdc-icon-button__icon">favorite_border</i>
        </button>
        <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
          title="Share">share</button>
        <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
          title="More options">more_vert</button>
      </div>
    </div>

    <h4>Rich media</h4>

    <div class="mdc-card" style="width: 300px;">
      <div class="mdc-card__primary-action" tabindex="0">
        <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('apple.png');">
          <div class="mdc-card__media-content">Title</div>
        </div>
        <div class="mdc-card__ripple"></div>
      </div>
    </div>

    <h4>Actions</h4>

    <div class="mdc-card" style="width: 300px;">
      <div class="mdc-card__primary-action" tabindex="0">
        <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('apple.png');">
          <div class="mdc-card__media-content">Title</div>
        </div>
        <div class="mdc-card__ripple"></div>
      </div>
      <div class="mdc-card__actions">
        <button class="mdc-button mdc-card__action mdc-card__action--button">
          <div class="mdc-button__ripple"></div>
          <span class="mdc-button__label">Action 1</span>
        </button>
        <button class="mdc-button mdc-card__action mdc-card__action--button">
          <div class="mdc-button__ripple"></div>
          <span class="mdc-button__label">Action 2</span>
        </button>
      </div>
    </div>

    <h4>Actions 2</h4>

    <div class="mdc-card" style="width: 300px;">
      <div class="mdc-card__primary-action" tabindex="0">
        <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('apple.png');">
          <div class="mdc-card__media-content">Title</div>
        </div>
        <div class="mdc-card__ripple"></div>
      </div>
      <div class="mdc-card__actions">
        <button class="mdc-icon-button mdc-card__action mdc-card__action--icon" aria-pressed="false"
          aria-label="Add to favorites" title="Add to favorites">
          <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
          <i class="material-icons mdc-icon-button__icon">favorite_border</i>
        </button>
        <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
          title="Share">share</button>
        <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
          title="More options">more_vert</button>
      </div>
    </div>


    <h4>To have a single action button take up the entire width of the action row</h4>

    <div class="mdc-card" style="width: 300px;">
      <div class="mdc-card__actions mdc-card__actions--full-bleed">
        <a class="mdc-button mdc-card__action mdc-card__action--button" href="#">
          <div class="mdc-button__ripple"></div>
          <span class="mdc-button__label">All Business Headlines</span>
          <i class="material-icons mdc-button__icon" aria-hidden="true">arrow_forward</i>
        </a>
      </div>
    </div>


    <h4>To display buttons and icons in the same row, wrap them in mdc-card__action-buttons and mdc-card__action-icons
      elements</h4>

    <div class="mdc-card" style="width: 300px;">
      <div class="mdc-card__actions">
        <div class="mdc-card__action-buttons">
          <button class="mdc-button mdc-card__action mdc-card__action--button">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">Read</span>
          </button>
          <button class="mdc-button mdc-card__action mdc-card__action--button">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">Bookmark</span>
          </button>
        </div>
        <div class="mdc-card__action-icons">
          <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
            title="Share">share</button>
          <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
            title="More options">more_vert</button>
        </div>
      </div>
    </div>


    <h4>The following is an example incorporating all of the above elements</h4>

    <div class="mdc-card" style="width: 300px;">
      <div class="mdc-card__primary-action">
        <div class="mdc-card__media mdc-card__media--square">
          <div class="mdc-card__media-content">Title</div>
        </div>
        <!-- ... additional primary action content ... -->
        <div class="mdc-card__ripple"></div>
      </div>
      <div class="mdc-card__actions">
        <div class="mdc-card__action-buttons">
          <button class="mdc-button mdc-card__action mdc-card__action--button">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">Action 1</span>
          </button>
          <button class="mdc-button mdc-card__action mdc-card__action--button">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">Action 2</span>
          </button>
        </div>
        <div class="mdc-card__action-icons">
          <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
            title="Share">share</button>
          <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon"
            title="More options">more_vert</button>
        </div>
      </div>
    </div>


    <h4>checkboxes</h4>

    <div class="mdc-touch-target-wrapper">
      <div class="mdc-checkbox mdc-checkbox--touch">
        <input type="checkbox" class="mdc-checkbox__native-control" id="checkbox-1" />
        <div class="mdc-checkbox__background">
          <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
            <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
          </svg>
          <div class="mdc-checkbox__mixedmark"></div>
        </div>
        <div class="mdc-checkbox__ripple"></div>
      </div>
    </div>


    <h4>Checkbox example</h4>

    <div class="mdc-form-field">
      <div class="mdc-checkbox">
        <input type="checkbox" class="mdc-checkbox__native-control" id="checkbox-1" />
        <div class="mdc-checkbox__background">
          <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
            <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
          </svg>
          <div class="mdc-checkbox__mixedmark"></div>
        </div>
        <div class="mdc-checkbox__ripple"></div>
      </div>
      <label for="checkbox-1">Checkbox 1</label>
    </div>


    <h4>Disabled checkboxes</h4>

    <div class="mdc-checkbox mdc-checkbox--disabled">
      <input type="checkbox" id="basic-disabled-checkbox" class="mdc-checkbox__native-control" disabled />
      <div class="mdc-checkbox__background">
        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
          <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
        </svg>
        <div class="mdc-checkbox__mixedmark"></div>
      </div>
      <div class="mdc-checkbox__ripple"></div>
    </div>
    <label for="basic-disabled-checkbox" id="basic-disabled-checkbox-label">This is my disabled checkbox</label>


    <h4>Indeterminate checkboxes</h4>

    <div class="mdc-checkbox">
      <input type="checkbox" id="basic-indeterminate-checkbox" class="mdc-checkbox__native-control"
        data-indeterminate="true" />
      <div class="mdc-checkbox__background">
        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
          <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
        </svg>
        <div class="mdc-checkbox__mixedmark"></div>
      </div>
      <div class="mdc-checkbox__ripple"></div>
    </div>
    <label for="basic-indeterminate-checkbox" id="basic-indeterminate-checkbox-label">This is my indeterminate
      checkbox</label>


    <script>
      for (const el of document.querySelectorAll('.mdc-checkbox')) {
        const checkbox = new mdc.checkbox.MDCCheckbox(el)
      }
    </script>


    <h4>Chips</h4>

    <span class="mdc-evolution-chip-set" role="grid">
      <span class="mdc-evolution-chip-set__chips" role="presentation">
        <span class="mdc-evolution-chip" role="row" id="c0">
          <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell">
            <button class="mdc-evolution-chip__action mdc-evolution-chip__action--primary" type="button" tabindex="0">
              <span class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"></span>
              <span class="mdc-evolution-chip__text-label">Chip one</span>
            </button>
          </span>
        </span>
        <span class="mdc-evolution-chip" role="row" id="c1">
          <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell">
            <button class="mdc-evolution-chip__action mdc-evolution-chip__action--primary" type="button" tabindex="-1">
              <span class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"></span>
              <span class="mdc-evolution-chip__text-label">Chip two</span>
            </button>
          </span>
        </span>
      </span>
    </span>

    <script>
      for (const el of document.querySelectorAll('.mdc-evolution-chip-set')) {
        const chip = new mdc.chips.MDCChipSet(el)
      }
    </script>



    <h4>Standard data table</h4>

    <div class="mdc-data-table">
      <div class="mdc-data-table__table-container">
        <table class="mdc-data-table__table" aria-label="Dessert calories">
          <thead>
            <tr class="mdc-data-table__header-row">
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Dessert</th>
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader"
                scope="col">Carbs (g)</th>
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader"
                scope="col">Protein (g)</th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Comments</th>
            </tr>
          </thead>
          <tbody class="mdc-data-table__content">
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
              <td class="mdc-data-table__cell">Super tasty</td>
            </tr>
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.33333333333</td>
              <td class="mdc-data-table__cell">I like ice cream more</td>
            </tr>
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Eclair</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">6.0</td>
              <td class="mdc-data-table__cell">New filing flavor</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>


    <h4>Data table with row selection</h4>

    <div class="mdc-data-table">
      <div class="mdc-data-table__table-container">
        <table class="mdc-data-table__table" aria-label="Dessert calories">
          <thead>
            <tr class="mdc-data-table__header-row">
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox" role="columnheader"
                scope="col">
                <div class="mdc-checkbox mdc-data-table__header-row-checkbox mdc-checkbox--selected">
                  <input type="checkbox" class="mdc-checkbox__native-control" aria-label="Toggle all rows" />
                  <div class="mdc-checkbox__background">
                    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                      <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                  </div>
                  <div class="mdc-checkbox__ripple"></div>
                </div>
              </th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Signal name</th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Status</th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Severity</th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Stage</th>
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader"
                scope="col">Time</th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Roles</th>
            </tr>
          </thead>
          <tbody class="mdc-data-table__content">
            <tr data-row-id="u0" class="mdc-data-table__row">
              <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
                <div class="mdc-checkbox mdc-data-table__row-checkbox">
                  <input type="checkbox" class="mdc-checkbox__native-control" aria-labelledby="u0" />
                  <div class="mdc-checkbox__background">
                    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                      <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                  </div>
                  <div class="mdc-checkbox__ripple"></div>
                </div>
              </td>
              <th class="mdc-data-table__cell" scope="row" id="u0">Arcus watch slowdown</th>
              <td class="mdc-data-table__cell">Online</td>
              <td class="mdc-data-table__cell">Medium</td>
              <td class="mdc-data-table__cell">Triaged</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
              <td class="mdc-data-table__cell">Allison Brie</td>
            </tr>
            <tr data-row-id="u1" class="mdc-data-table__row mdc-data-table__row--selected" aria-selected="true">
              <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
                <div class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected">
                  <input type="checkbox" class="mdc-checkbox__native-control" checked aria-labelledby="u1" />
                  <div class="mdc-checkbox__background">
                    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                      <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                  </div>
                  <div class="mdc-checkbox__ripple"></div>
                </div>
              </td>
              <th class="mdc-data-table__cell" scope="row" id="u1">monarch: prod shared
                ares-managed-features-provider-heavy</th>
              <td class="mdc-data-table__cell">Offline</td>
              <td class="mdc-data-table__cell">Huge</td>
              <td class="mdc-data-table__cell">Triaged</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
              <td class="mdc-data-table__cell">Brie Larson</td>
            </tr>
            <tr data-row-id="u2" class="mdc-data-table__row mdc-data-table__row--selected" aria-selected="true">
              <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
                <div class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected">
                  <input type="checkbox" class="mdc-checkbox__native-control" checked aria-labelledby="u2" />
                  <div class="mdc-checkbox__background">
                    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                      <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                  </div>
                  <div class="mdc-checkbox__ripple"></div>
                </div>
              </td>
              <th class="mdc-data-table__cell" scope="row" id="u2">monarch: prod shared
                ares-managed-features-provider-heavy</th>
              <td class="mdc-data-table__cell">Online</td>
              <td class="mdc-data-table__cell">Minor</td>
              <td class="mdc-data-table__cell">Not triaged</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
              <td class="mdc-data-table__cell">Jeremy Lake</td>
            </tr>
            <tr data-row-id="u3" class="mdc-data-table__row">
              <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
                <div class="mdc-checkbox mdc-data-table__row-checkbox">
                  <input type="checkbox" class="mdc-checkbox__native-control" aria-labelledby="u3" />
                  <div class="mdc-checkbox__background">
                    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                      <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                  </div>
                  <div class="mdc-checkbox__ripple"></div>
                </div>
              </td>
              <th class="mdc-data-table__cell" scope="row" id="u3">Arcus watch slowdown</th>
              <td class="mdc-data-table__cell">Online</td>
              <td class="mdc-data-table__cell">Negligible</td>
              <td class="mdc-data-table__cell">Triaged</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
              <td class="mdc-data-table__cell">Angelina Cheng</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <h4>Data table with pagination</h4>

    <div class="mdc-data-table">
      <div class="mdc-data-table__table-container">
        <table class="mdc-data-table__table" aria-label="Dessert calories">
          <thead>
            <tr class="mdc-data-table__header-row">
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Dessert</th>
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader"
                scope="col">Carbs (g)</th>
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader"
                scope="col">Protein (g)</th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Comments</th>
            </tr>
          </thead>
          <tbody class="mdc-data-table__content">
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
              <td class="mdc-data-table__cell">Super tasty</td>
            </tr>
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.33333333333</td>
              <td class="mdc-data-table__cell">I like ice cream more</td>
            </tr>
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Eclair</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">6.0</td>
              <td class="mdc-data-table__cell">New filing flavor</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="mdc-data-table__pagination">
        <div class="mdc-data-table__pagination-trailing">
          <div class="mdc-data-table__pagination-rows-per-page">
            <div class="mdc-data-table__pagination-rows-per-page-label">
              Rows per page
            </div>

            <div
              class="mdc-select mdc-select--outlined mdc-select--no-label mdc-data-table__pagination-rows-per-page-select">
              <div class="mdc-select__anchor" role="button" aria-haspopup="listbox"
                aria-labelledby="demo-pagination-select" tabindex="0">
                <span class="mdc-select__selected-text-container">
                  <span id="demo-pagination-select" class="mdc-select__selected-text">10</span>
                </span>
                <span class="mdc-select__dropdown-icon">
                  <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5">
                    <polygon class="mdc-select__dropdown-icon-inactive" stroke="none" fill-rule="evenodd"
                      points="7 10 12 15 17 10">
                    </polygon>
                    <polygon class="mdc-select__dropdown-icon-active" stroke="none" fill-rule="evenodd"
                      points="7 15 12 10 17 15">
                    </polygon>
                  </svg>
                </span>
                <span class="mdc-notched-outline mdc-notched-outline--notched">
                  <span class="mdc-notched-outline__leading"></span>
                  <span class="mdc-notched-outline__trailing"></span>
                </span>
              </div>

              <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth" role="listbox">
                <ul class="mdc-list">
                  <li class="mdc-list-item mdc-list-item--selected" aria-selected="true" role="option" data-value="10">
                    <span class="mdc-list-item__text">10</span>
                  </li>
                  <li class="mdc-list-item" role="option" data-value="25">
                    <span class="mdc-list-item__text">25</span>
                  </li>
                  <li class="mdc-list-item" role="option" data-value="100">
                    <span class="mdc-list-item__text">100</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="mdc-data-table__pagination-navigation">
            <div class="mdc-data-table__pagination-total">
              1‑10 of 100
            </div>
            <button class="mdc-icon-button material-icons mdc-data-table__pagination-button" data-first-page="true"
              disabled>
              <div class="mdc-button__icon">first_page</div>
            </button>
            <button class="mdc-icon-button material-icons mdc-data-table__pagination-button" data-prev-page="true"
              disabled>
              <div class="mdc-button__icon">chevron_left</div>
            </button>
            <button class="mdc-icon-button material-icons mdc-data-table__pagination-button" data-next-page="true">
              <div class="mdc-button__icon">chevron_right</div>
            </button>
            <button class="mdc-icon-button material-icons mdc-data-table__pagination-button" data-last-page="true">
              <div class="mdc-button__icon">last_page</div>
            </button>
          </div>
        </div>
      </div>
    </div>

    <h4>Data table with progress indicator</h4>

    <!-- Use showProgress() and hideProgress() API to show or hide the progress indicator. -->

    <div class="mdc-data-table">
      <div class="mdc-data-table__table-container">
        <table class="mdc-data-table__table" aria-label="Dessert calories">
          <thead>
            <tr class="mdc-data-table__header-row">
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Dessert</th>
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader"
                scope="col">Carbs (g)</th>
              <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader"
                scope="col">Protein (g)</th>
              <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Comments</th>
            </tr>
          </thead>
          <tbody class="mdc-data-table__content">
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
              <td class="mdc-data-table__cell">Super tasty</td>
            </tr>
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Ice cream sandwich</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.33333333333</td>
              <td class="mdc-data-table__cell">I like ice cream more</td>
            </tr>
            <tr class="mdc-data-table__row">
              <th class="mdc-data-table__cell" scope="row">Eclair</th>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
              <td class="mdc-data-table__cell mdc-data-table__cell--numeric">6.0</td>
              <td class="mdc-data-table__cell">New filing flavor</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="mdc-data-table__progress-indicator">
        <div class="mdc-data-table__scrim"></div>
        <div class="mdc-linear-progress mdc-linear-progress--indeterminate mdc-data-table__linear-progress"
          role="progressbar" aria-label="Data is being loaded...">
          <div class="mdc-linear-progress__buffer">
            <div class="mdc-linear-progress__buffer-bar"></div>
            <div class="mdc-linear-progress__buffer-dots"></div>
          </div>
          <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
            <span class="mdc-linear-progress__bar-inner"></span>
          </div>
          <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
            <span class="mdc-linear-progress__bar-inner"></span>
          </div>
        </div>
      </div>
    </div>

    <h4>Data table with column sorting</h4>

    <div class="mdc-data-table">
      <table class="mdc-data-table__table" aria-label="Dessert calories">
        <thead>
          <tr class="mdc-data-table__header-row">
            <th class="mdc-data-table__header-cell mdc-data-table__header-cell--with-sort" role="columnheader"
              scope="col" aria-sort="none" data-column-id="dessert">
              <div class="mdc-data-table__header-cell-wrapper">
                <div class="mdc-data-table__header-cell-label">
                  Dessert
                </div>
                <button class="mdc-icon-button material-icons mdc-data-table__sort-icon-button"
                  aria-label="Sort by dessert" aria-describedby="dessert-status-label">arrow_upward</button>
                <div class="mdc-data-table__sort-status-label" aria-hidden="true" id="dessert-status-label">
                </div>
              </div>
            </th>
            <th
              class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric mdc-data-table__header-cell--with-sort mdc-data-table__header-cell--sorted"
              role="columnheader" scope="col" aria-sort="ascending" data-column-id="carbs">
              <div class="mdc-data-table__header-cell-wrapper">
                <button class="mdc-icon-button material-icons mdc-data-table__sort-icon-button"
                  aria-label="Sort by carbs" aria-describedby="carbs-status-label">arrow_upward</button>
                <div class="mdc-data-table__header-cell-label">
                  Carbs (g)
                </div>
                <div class="mdc-data-table__sort-status-label" aria-hidden="true" id="carbs-status-label"></div>
              </div>
            </th>
            <th
              class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric mdc-data-table__header-cell--with-sort"
              role="columnheader" scope="col" aria-sort="none" data-column-id="protein">
              <div class="mdc-data-table__header-cell-wrapper">
                <button class="mdc-icon-button material-icons mdc-data-table__sort-icon-button"
                  aria-label="Sort by protein" aria-describedby="protein-status-label">arrow_upward</button>
                <div class="mdc-data-table__header-cell-label">
                  Protein (g)
                </div>
                <div class="mdc-data-table__sort-status-label" aria-hidden="true" id="protein-status-label"></div>
              </div>
            </th>
            <th class="mdc-data-table__header-cell" role="columnheader" scope="col" data-column-id="comments">
              Comments
            </th>
          </tr>
        </thead>
        <tbody class="mdc-data-table__content">
          <tr class="mdc-data-table__row">
            <td class="mdc-data-table__cell">Frozen yogurt</td>
            <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
              24
            </td>
            <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
              4.0
            </td>
            <td class="mdc-data-table__cell">Super tasty</td>
          </tr>
          <tr class="mdc-data-table__row">
            <td class="mdc-data-table__cell">Bread</td>
            <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
              10
            </td>
            <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
              8.0
            </td>
            <td class="mdc-data-table__cell">Super tasty</td>
          </tr>
        </tbody>
      </table>
    </div>


    <script>
      for (const el of document.querySelectorAll('.mdc-data-table')) {
        const checkbox = new mdc.dataTable.MDCDataTable(el)
      }
    </script>


    <h4>Alert dialog</h4>

    <div class="mdc-dialog" id="dialog1">
      <div class="mdc-dialog__container">
        <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="my-dialog-title"
          aria-describedby="my-dialog-content">
          <div class="mdc-dialog__content" id="my-dialog-content">
            Discard draft?
          </div>
          <div class="mdc-dialog__actions">
            <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
              <div class="mdc-button__ripple"></div>
              <span class="mdc-button__label">Cancel</span>
            </button>
            <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="discard">
              <div class="mdc-button__ripple"></div>
              <span class="mdc-button__label">Discard</span>
            </button>
          </div>
        </div>
      </div>
      <div class="mdc-dialog__scrim"></div>
    </div>

    <script type="text/javascript">
      let dialog1 = new mdc.dialog.MDCDialog(document.querySelector('#dialog1'))
      dialog1.listen('MDCDialog:opened', function () {
      });
      dialog1.listen('MDCDialog:closing', function () {
      }); 
    </script>

    <button class="mdc-button" onclick="dialog1.open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Alert dialog</span>
    </button>


    <h4>Simple dialog</h4>

    <div class="mdc-dialog" id="dialog2">
      <div class="mdc-dialog__container">
        <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="my-dialog-title"
          aria-describedby="my-dialog-content">
          <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
          <h2 class="mdc-dialog__title" id="my-dialog-title">
            <!--
     -->Choose a Ringtone
            <!--
   -->
          </h2>
          <div class="mdc-dialog__content" id="my-dialog-content">
            <ul class="mdc-list mdc-list--avatar-list">
              <li class="mdc-list-item" tabindex="0" data-mdc-dialog-action="none">
                <span class="mdc-list-item__text">None</span>
              </li>
              <li class="mdc-list-item" data-mdc-dialog-action="callisto">
                <span class="mdc-list-item__text">Callisto</span>
              </li>
              <!-- ... -->
            </ul>
          </div>
        </div>
      </div>
      <div class="mdc-dialog__scrim"></div>
    </div>

    <button class="mdc-button" onclick="new mdc.dialog.MDCDialog(document.querySelector('#dialog2')).open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Simple dialog</span>
    </button>


    <h4>Confirmation dialog</h4>

    <div class="mdc-dialog" id="dialog3">
      <div class="mdc-dialog__container">
        <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="my-dialog-title"
          aria-describedby="my-dialog-content">
          <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
          <h2 class="mdc-dialog__title" id="my-dialog-title">
            <!--
     -->Choose a Ringtone
            <!--
   -->
          </h2>
          <div class="mdc-dialog__content" id="my-dialog-content">
            <ul class="mdc-list">
              <li class="mdc-list-item" tabindex="0">
                <span class="mdc-list-item__graphic">
                  <div class="mdc-radio">
                    <input class="mdc-radio__native-control" type="radio" id="test-dialog-baseline-confirmation-radio-1"
                      name="test-dialog-baseline-confirmation-radio-group" checked>
                    <div class="mdc-radio__background">
                      <div class="mdc-radio__outer-circle"></div>
                      <div class="mdc-radio__inner-circle"></div>
                    </div>
                  </div>
                </span>
                <label id="test-dialog-baseline-confirmation-radio-1-label"
                  for="test-dialog-baseline-confirmation-radio-1" class="mdc-list-item__text">None</label>
              </li>
              <!-- ... -->
            </ul>
          </div>
          <div class="mdc-dialog__actions">
            <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">
              <div class="mdc-button__ripple"></div>
              <span class="mdc-button__label">Cancel</span>
            </button>
            <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept">
              <div class="mdc-button__ripple"></div>
              <span class="mdc-button__label">OK</span>
            </button>
          </div>
        </div>
      </div>
      <div class="mdc-dialog__scrim"></div>
    </div>

    <button class="mdc-button" onclick="new mdc.dialog.MDCDialog(document.querySelector('#dialog3')).open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Confirmation dialog</span>
    </button>


    <h4>Full-screen dialog</h4>

    <!-- <div id="dialog4" class="mdc-dialog mdc-dialog--open mdc-dialog--fullscreen"> -->
    <div id="dialog4" class="mdc-dialog mdc-dialog--fullscreen">
      <div class="mdc-dialog__container">
        <div class="mdc-dialog__surface" role="dialog" aria-modal="true" aria-labelledby="my-dialog-title"
          aria-describedby="my-dialog-content">
          <div class="mdc-dialog__header">
            <h2 class="mdc-dialog__title" id="my-dialog-title">
              Full-Screen Dialog Title
            </h2>
            <button class="mdc-icon-button material-icons mdc-dialog__close" data-mdc-dialog-action="close">
              close
            </button>
          </div>
          <div class="mdc-dialog__content" id="my-dialog-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Sed scelerisque metus dapibus, maximus massa pulvinar, commodo nunc.
            Quisque vitae luctus lectus, ut tempus ipsum. Sed suscipit gravida scelerisque.
            Aenean vulputate elementum est, quis consectetur orci consectetur ac.
            Quisque accumsan vel nisi id dapibus. Suspendisse nec urna eu massa ornare rutrum.
            Vivamus at nisi sit amet nulla pretium volutpat sit amet in justo. Donec mi metus,
            interdum ac tincidunt at, vehicula vitae nisl. Morbi fermentum dapibus massa,
            nec lobortis massa vestibulum eu.
          </div>
          <div class="mdc-dialog__actions">
            <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="ok">
              <div class="mdc-button__ripple"></div>
              <span class="mdc-button__label">OK</span>
            </button>
          </div>
        </div>
      </div>
      <div class="mdc-dialog__scrim"></div>
    </div>

    <button class="mdc-button" onclick="new mdc.dialog.MDCDialog(document.querySelector('#dialog4')).open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Fullscreen dialog</span>
    </button>


    <h4>Banner</h4>

    <div id="banner1" class="mdc-banner" role="banner">
      <div class="mdc-banner__content" role="alertdialog" aria-live="assertive">
        <div class="mdc-banner__graphic-text-wrapper">
          <div class="mdc-banner__text">
            There was a problem processing a transaction on your credit card.
          </div>
        </div>
        <div class="mdc-banner__actions">
          <button type="button" class="mdc-button mdc-banner__primary-action">
            <div class="mdc-button__ripple"></div>
            <div class="mdc-button__label">Fix it</div>
          </button>
        </div>
      </div>
    </div>

    <button class="mdc-button" onclick="new mdc.banner.MDCBanner(document.querySelector('#banner1')).open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Banner dialog</span>
    </button>


    <h4>Fixed Banner</h4>

    <div id="banner2" class="mdc-banner" role="banner">
      <div class="mdc-banner__fixed">
        <div class="mdc-banner__content" role="alertdialog" aria-live="assertive">
          <div class="mdc-banner__graphic-text-wrapper">
            <div class="mdc-banner__text">
              There was a problem processing a transaction on your credit card.
            </div>
          </div>
          <div class="mdc-banner__actions">
            <button type="button" class="mdc-button mdc-banner__primary-action">
              <div class="mdc-button__ripple"></div>
              <div class="mdc-button__label">Fix it</div>
            </button>
          </div>
        </div>
      </div>
    </div>

    <button class="mdc-button" onclick="new mdc.banner.MDCBanner(document.querySelector('#banner2')).open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Fixed dialog</span>
    </button>



    <h4>Banner with graphic</h4>

    <div id="banner3" class="mdc-banner" role="banner">
      <div class="mdc-banner__content" role="alertdialog" aria-live="assertive">
        <div class="mdc-banner__graphic-text-wrapper">
          <div class="mdc-banner__graphic" role="img" alt=""><i
              class="material-icons mdc-banner__icon">error_outline</i></div>
          <div class="mdc-banner__text">
            There was a problem processing a transaction on your credit card.
          </div>
        </div>
        <div class="mdc-banner__actions">
          <button type="button" class="mdc-button mdc-banner__primary-action">
            <div class="mdc-button__ripple"></div>
            <div class="mdc-button__label">Fix it</div>
          </button>
        </div>
      </div>
    </div>

    <button class="mdc-button" onclick="new mdc.banner.MDCBanner(document.querySelector('#banner3')).open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Banner with graphic</span>
    </button>



    <h4>Banner with two actions</h4>

    <div id="banner4" class="mdc-banner" role="banner">
      <div class="mdc-banner__content" role="alertdialog" aria-live="assertive">
        <div class="mdc-banner__graphic-text-wrapper">
          <div class="mdc-banner__text">
            There was a problem processing a transaction on your credit card.
          </div>
        </div>
        <div class="mdc-banner__actions">
          <button type="button" class="mdc-button mdc-banner__secondary-action">
            <div class="mdc-button__ripple"></div>
            <div class="mdc-button__label">Learn more</div>
          </button>
          <button type="button" class="mdc-button mdc-banner__primary-action">
            <div class="mdc-button__ripple"></div>
            <div class="mdc-button__label">Fix it</div>
          </button>
        </div>
      </div>
    </div>

    <button class="mdc-button" onclick="new mdc.banner.MDCBanner(document.querySelector('#banner4')).open()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Open Banner with two actions</span>
    </button>


    <h4>Standard Image List</h4>

    <ul class="mdc-image-list my-image-list">
      <li class="mdc-image-list__item">
        <div class="mdc-image-list__image-aspect-container">
          <img class="mdc-image-list__image" src="apple.png">
        </div>
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Label 1</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <div class="mdc-image-list__image-aspect-container">
          <img class="mdc-image-list__image" src="apple.png">
        </div>
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Label 2</span>
        </div>
      </li>
    </ul>



    <h4>Masonry Image List</h4>

    <ul class="mdc-image-list mdc-image-list--masonry my-masonry-image-list">
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="apple.png" style="width: 100px;">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Text 1</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="apple.png" style="width: 100px;">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Text 2</span>
        </div>
      </li>
    </ul>


    <h4>Single-line list</h4>

    <ul class="mdc-list">
      <li class="mdc-list-item" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
    </ul>


    <h4>Two-line list</h4>

    <ul class="mdc-list mdc-list--two-line">
      <li class="mdc-list-item" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">
          <span class="mdc-list-item__primary-text">Two-line item</span>
          <span class="mdc-list-item__secondary-text">Secondary text</span>
        </span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">
          <span class="mdc-list-item__primary-text">Two-line item</span>
          <span class="mdc-list-item__secondary-text">Secondary text</span>
        </span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">
          <span class="mdc-list-item__primary-text">Two-line item</span>
          <span class="mdc-list-item__secondary-text">Secondary text</span>
        </span>
      </li>
    </ul>


    <h4>List Groups</h4>

    <div class="mdc-list-group">
      <h3 class="mdc-list-group__subheader">List 1</h3>
      <ul class="mdc-list">
        <li class="mdc-list-item" tabindex="0">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">line item</span>
        </li>
        <li class="mdc-list-item">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">line item</span>
        </li>
        <li class="mdc-list-item">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">line item</span>
        </li>
      </ul>
      <h3 class="mdc-list-group__subheader">List 2</h3>
      <ul class="mdc-list">
        <li class="mdc-list-item">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">line item</span>
        </li>
        <li class="mdc-list-item">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">line item</span>
        </li>
        <li class="mdc-list-item">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">line item</span>
        </li>
      </ul>
    </div>


    <h4>List Dividers</h4>

    <ul class="mdc-list">
      <li class="mdc-list-item" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Item 1 - Division 1</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Item 2 - Division 1</span>
      </li>
      <li role="separator" class="mdc-list-divider"></li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Item 1 - Division 2</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Item 2 - Division 2</span>
      </li>
    </ul>


    <h4>List Dividers 2 </h4>

    <ul class="mdc-list">
      <li class="mdc-list-item" tabindex="0">
        <span class="mdc-list-item__text">Item 1 - List 1</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__text">Item 2 - List 1</span>
      </li>
    </ul>
    <hr class="mdc-list-divider">
    <ul class="mdc-list">
      <li class="mdc-list-item">
        <span class="mdc-list-item__text">Item 1 - List 2</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__text">Item 2 - List 2</span>
      </li>
    </ul>


    <h4>Single Selection List</h4>

    <ul id="my-list" class="mdc-list" role="listbox">
      <li class="mdc-list-item" role="option" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item" role="option">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item" role="option">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
    </ul>


    <h4>Pre-selected list item</h4>

    <ul id="my-list" class="mdc-list" role="listbox">
      <li class="mdc-list-item" role="option" aria-selected="false">
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item mdc-list-item--selected" role="option" aria-selected="true" tabindex="0">
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item" role="option" aria-selected="false">
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
    </ul>


    <h4>List with radio group</h4>

    <ul class="mdc-list" role="radiogroup">
      <li class="mdc-list-item" role="radio" aria-checked="false">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__graphic">
          <div class="mdc-radio">
            <input class="mdc-radio__native-control" type="radio" id="demo-list-radio-item-1"
              name="demo-list-radio-item-group" value="1">
            <div class="mdc-radio__background">
              <div class="mdc-radio__outer-circle"></div>
              <div class="mdc-radio__inner-circle"></div>
            </div>
          </div>
        </span>
        <label class="mdc-list-item__text" for="demo-list-radio-item-1">Option 1</label>
      </li>
      <li class="mdc-list-item" role="radio" aria-checked="true" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__graphic">
          <div class="mdc-radio">
            <input class="mdc-radio__native-control" type="radio" id="demo-list-radio-item-2"
              name="demo-list-radio-item-group" value="2" checked>
            <div class="mdc-radio__background">
              <div class="mdc-radio__outer-circle"></div>
              <div class="mdc-radio__inner-circle"></div>
            </div>
          </div>
        </span>
        <label class="mdc-list-item__text" for="demo-list-radio-item-2">Option 2</label>
      </li>
      <li class="mdc-list-item" role="radio" aria-checked="false">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__graphic">
          <div class="mdc-radio">
            <input class="mdc-radio__native-control" type="radio" id="demo-list-radio-item-3"
              name="demo-list-radio-item-group" value="3">
            <div class="mdc-radio__background">
              <div class="mdc-radio__outer-circle"></div>
              <div class="mdc-radio__inner-circle"></div>
            </div>
          </div>
        </span>
        <label class="mdc-list-item__text" for="demo-list-radio-item-3">Option 3</label>
      </li>
    </ul>


    <h4>List with checkbox items</h4>

    <ul class="mdc-list" role="group" aria-label="List with checkbox items">
      <li class="mdc-list-item" role="checkbox" aria-checked="false">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__graphic">
          <div class="mdc-checkbox">
            <input type="checkbox" class="mdc-checkbox__native-control" id="demo-list-checkbox-item-1" />
            <div class="mdc-checkbox__background">
              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
              </svg>
              <div class="mdc-checkbox__mixedmark"></div>
            </div>
          </div>
        </span>
        <label class="mdc-list-item__text" for="demo-list-checkbox-item-1">Option 1</label>
      </li>
      <li class="mdc-list-item" role="checkbox" aria-checked="true" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__graphic">
          <div class="mdc-checkbox">
            <input type="checkbox" class="mdc-checkbox__native-control" id="demo-list-checkbox-item-2" checked />
            <div class="mdc-checkbox__background">
              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
              </svg>
              <div class="mdc-checkbox__mixedmark"></div>
            </div>
          </div>
        </span>
        <label class="mdc-list-item__text" for="demo-list-checkbox-item-2">Option 2</label>
      </li>
      <li class="mdc-list-item" role="checkbox" aria-checked="false">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__graphic">
          <div class="mdc-checkbox">
            <input type="checkbox" class="mdc-checkbox__native-control" id="demo-list-checkbox-item-3" />
            <div class="mdc-checkbox__background">
              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
              </svg>
              <div class="mdc-checkbox__mixedmark"></div>
            </div>
          </div>
        </span>
        <label class="mdc-list-item__text" for="demo-list-checkbox-item-3">Option 3</label>
      </li>
    </ul>


    <script>
      for (const el of document.querySelectorAll('.mdc-list')) {
        const list = new mdc.list.MDCList(el)
        const listItemRipples = list.listElements.map((listItemEl) => new mdc.ripple.MDCRipple(listItemEl))
      }
    </script>


    <h4>Basic Menu</h4>

    <div id=menu1 class="mdc-menu mdc-menu-surface">
      <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
        <li class="mdc-list-item" role="menuitem">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">A Menu Item</span>
        </li>
        <li class="mdc-list-item" role="menuitem">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">Another Menu Item</span>
        </li>
      </ul>
    </div>

    <div class="mdc-touch-target-wrapper" onclick="new mdc.menu.MDCMenu(document.querySelector('#menu1')).open = true">
      <button class="mdc-button mdc-button--touch">
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show menu</span>
      </button>
    </div>


    <h4>Selection Group Menu</h4>

    <div id=menu2 class="mdc-menu mdc-menu-surface" id="demo-menu">
      <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
        <li>
          <ul class="mdc-menu__selection-group">
            <li class="mdc-list-item" role="menuitem">
              <span class="mdc-list-item__ripple"></span>
              <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
                ...
              </span>
              <span class="mdc-list-item__text">Single</span>
            </li>
            <li class="mdc-list-item" role="menuitem">
              <span class="mdc-list-item__ripple"></span>
              <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
                ...
              </span>
              <span class="mdc-list-item__text">1.15</span>
            </li>
          </ul>
        </li>
        <li class="mdc-list-divider" role="separator"></li>
        <li class="mdc-list-item" role="menuitem">
          <span class="mdc-list-item__ripple"></span>
          <span class="mdc-list-item__text">Add space before paragraph</span>
        </li>
        <!-- ... -->
      </ul>
    </div>

    <div class="mdc-touch-target-wrapper" onclick="new mdc.menu.MDCMenu(document.querySelector('#menu2')).open = true">
      <button class="mdc-button mdc-button--touch">
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show menu</span>
      </button>
    </div>


    <h4>Anchored To Parent</h4>

    <div class="toolbar mdc-menu-surface--anchor mdc-touch-target-wrapper">

      <button class="mdc-button mdc-button--touch"
        onclick="new mdc.menu.MDCMenu(document.querySelector('#menu3')).open = true">
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show menu</span>
      </button>

      <div id=menu3 class="mdc-menu mdc-menu-surface">
        <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
          <li class="mdc-list-item" role="menuitem">
            <span class="mdc-list-item__ripple"></span>
            <span class="mdc-list-item__text">A Menu Item</span>
          </li>
          <li class="mdc-list-item" role="menuitem">
            <span class="mdc-list-item__ripple"></span>
            <span class="mdc-list-item__text">Another Menu Item</span>
          </li>
        </ul>
      </div>
    </div>

    <h4>Anchor To Element Within Wrapper</h4>

    <div class="mdc-menu-surface--anchor mdc-touch-target-wrapper">

      <button class="mdc-button mdc-button--touch"
        onclick="menu = new mdc.menu.MDCMenu(document.querySelector('#menu4')); menu.open = true; menu.setFixedPosition(true)">
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show Menu with Fixed Position</span>
      </button>

      <button class="mdc-button mdc-button--touch"
        onclick="menu = new mdc.menu.MDCMenu(document.querySelector('#menu4')); menu.open = true; menu.setAbsolutePosition(100, 100)">
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show Menu with Absolute Position</span>
      </button>

      <div id=menu4 class="mdc-menu mdc-menu-surface">
        <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
          <li class="mdc-list-item" role="menuitem">
            <span class="mdc-list-item__ripple"></span>
            <span class="mdc-list-item__text">A Menu Item</span>
          </li>
          <li class="mdc-list-item" role="menuitem">
            <span class="mdc-list-item__ripple"></span>
            <span class="mdc-list-item__text">Another Menu Item</span>
          </li>
        </ul>
      </div>

    </div>



    <h4>Standard navigation drawers</h4>

    <aside class="mdc-drawer" id="mdc-drawer1">
      <div class="mdc-drawer__content">
        <nav class="mdc-list" id='mdc-list1'>
          <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
            <span class="mdc-list-item__text">Inbox</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
            <span class="mdc-list-item__text">Outgoing</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
            <span class="mdc-list-item__text">Drafts</span>
          </a>
        </nav>
      </div>
    </aside>



    <h4>Dismissible Modal drawers</h4>

    <div class="mdc-touch-target-wrapper">
      <button class="mdc-button mdc-button--touch" id='mdc-button2'>
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show drawer</span>
      </button>
    </div>

    <script>
      let mdc_list2 = mdc.list.MDCList.attachTo(document.querySelector('#mdc-list2'))
      mdc_list2.wrapFocus = true
      let mdc_drawer2 = mdc.drawer.MDCDrawer.attachTo(document.querySelector('#mdc-drawer2'))
      let mdc_button2 = document.querySelector('#mdc-button2')
      mdc_button2.onclick = (ev) => { mdc_drawer2.open = true }

      mdc_drawer2.onclick = () => { mdc_drawer2.open = false; mdc_button1.focus() } // dismiss

      document.body.addEventListener('MDCDrawer:closed', () => {
        mdc_button2.focus();
      });
    </script>

    <h4>Drawer with separate list groups</h4>

    <aside class="mdc-drawer">
      <div class="mdc-drawer__content">
        <nav class="mdc-list">
          <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
            <span class="mdc-list-item__text">Inbox</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
            <span class="mdc-list-item__text">Star</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
            <span class="mdc-list-item__text">Sent Mail</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
            <span class="mdc-list-item__text">Drafts</span>
          </a>

          <hr class="mdc-list-divider">
          <h6 class="mdc-list-group__subheader">Labels</h6>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
            <span class="mdc-list-item__text">Family</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
            <span class="mdc-list-item__text">Friends</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
            <span class="mdc-list-item__text">Work</span>
          </a>
        </nav>
      </div>
    </aside>


    <h4>Drawer with header</h4>

    <aside class="mdc-drawer">
      <div class="mdc-drawer__header">
        <h3 class="mdc-drawer__title">Mail</h3>
        <h6 class="mdc-drawer__subtitle">email@material.io</h6>
      </div>
      <div class="mdc-drawer__content">
        <nav class="mdc-list">
          <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
            <span class="mdc-list-item__text">Inbox</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
            <span class="mdc-list-item__text">Outgoing</span>
          </a>
          <a class="mdc-list-item" href="#">
            <span class="mdc-list-item__ripple"></span>
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
            <span class="mdc-list-item__text">Drafts</span>
          </a>
        </nav>
      </div>
    </aside>


    <script>
      for (const selector of ['.mdc-drawer--dismissible', '.mdc-drawer--modal']) {
        for (const el of document.querySelectorAll(selector)) {
          const drawer = mdc.drawer.MDCDrawer.attachTo(el)
        }
      }
    </script>



    <h4>radio buttons</h4>

    <div class="mdc-touch-target-wrapper">
      <div class="mdc-radio mdc-radio--touch">
        <input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
        <div class="mdc-radio__ripple"></div>
      </div>
    </div>

    <script>
      for (const el of document.querySelectorAll('.mdc-radio')) {
        const tooltip = new mdc.radio.MDCRadio(el)
      }
    </script>


    <h4>Radio button</h4>

    <div class="mdc-form-field">
      <div class="mdc-radio">
        <input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
        <div class="mdc-radio__ripple"></div>
      </div>
      <label for="radio-1">Radio 1</label>
    </div>


    <h4>Disabled radio buttons</h4>

    <div class="mdc-form-field">
      <div class="mdc-radio mdc-radio--disabled">
        <input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" disabled>
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
        <div class="mdc-radio__ripple"></div>
      </div>
      <label for="radio-1">Radio 1</label>
    </div>

    <script>
      for (const el of document.querySelectorAll('.mdc-form-field')) {
        const tooltip = new mdc.formField.MDCFormField(el)
      }
// formField.input = radio
    </script>

    <h4>Continuous slider</h4>

    <div class="mdc-slider">
      <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume"
        aria-label="Continuous slider demo">
      <div class="mdc-slider__track">
        <div class="mdc-slider__track--inactive"></div>
        <div class="mdc-slider__track--active">
          <div class="mdc-slider__track--active_fill"></div>
        </div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__thumb-knob"></div>
      </div>
    </div>

    <script>
      const slider = new mdc.slider.MDCSlider(document.querySelector('.mdc-slider'))
    </script>


    <h4>Continuous range slider</h4>

    <div class="mdc-slider mdc-slider--range" id="mdc-slider2">
      <input class="mdc-slider__input" type="range" min="0" max="70" value="30" name="rangeStart"
        aria-label="Continuous range slider demo">
      <input class="mdc-slider__input" type="range" min="30" max="100" value="70" name="rangeEnd"
        aria-label="Continuous range slider demo">
      <div class="mdc-slider__track">
        <div class="mdc-slider__track--inactive"></div>
        <div class="mdc-slider__track--active">
          <div class="mdc-slider__track--active_fill"></div>
        </div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__thumb-knob"></div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__thumb-knob"></div>
      </div>
    </div>

    <script>
      const slider2 = new mdc.slider.MDCSlider(document.querySelector('#mdc-slider2'))
    </script>


    <h4>Discrete slider</h4>

    <div class="mdc-slider mdc-slider--discrete" id="mdc-slider3">
      <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" step="10"
        aria-label="Discrete slider demo">
      <div class="mdc-slider__track">
        <div class="mdc-slider__track--inactive"></div>
        <div class="mdc-slider__track--active">
          <div class="mdc-slider__track--active_fill"></div>
        </div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__value-indicator-container" aria-hidden="true">
          <div class="mdc-slider__value-indicator">
            <span class="mdc-slider__value-indicator-text">
              50
            </span>
          </div>
        </div>
        <div class="mdc-slider__thumb-knob"></div>
      </div>
    </div>

    <script>
      const slider3 = new mdc.slider.MDCSlider(document.querySelector('#mdc-slider3'))
    </script>


    <h4>Discrete slider with tick marks</h4>

    <div class="mdc-slider mdc-slider--discrete mdc-slider--tick-marks" id="mdc-slider4">
      <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" step="10"
        aria-label="Discrete slider with tick marks demo">
      <div class="mdc-slider__track">
        <div class="mdc-slider__track--inactive"></div>
        <div class="mdc-slider__track--active">
          <div class="mdc-slider__track--active_fill"></div>
        </div>
        <div class="mdc-slider__tick-marks">
          <div class="mdc-slider__tick-mark--active"></div>
          <div class="mdc-slider__tick-mark--active"></div>
          <div class="mdc-slider__tick-mark--active"></div>
          <div class="mdc-slider__tick-mark--active"></div>
          <div class="mdc-slider__tick-mark--active"></div>
          <div class="mdc-slider__tick-mark--active"></div>
          <div class="mdc-slider__tick-mark--inactive"></div>
          <div class="mdc-slider__tick-mark--inactive"></div>
          <div class="mdc-slider__tick-mark--inactive"></div>
          <div class="mdc-slider__tick-mark--inactive"></div>
          <div class="mdc-slider__tick-mark--inactive"></div>
        </div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__value-indicator-container" aria-hidden="true">
          <div class="mdc-slider__value-indicator">
            <span class="mdc-slider__value-indicator-text">
              50
            </span>
          </div>
        </div>
        <div class="mdc-slider__thumb-knob"></div>
      </div>
    </div>

    <script>
      const slider4 = new mdc.slider.MDCSlider(document.querySelector('#mdc-slider4'))
    </script>


    <h4>Discrete range slider</h4>

    <div class="mdc-slider mdc-slider--range mdc-slider--discrete" id="mdc-slider5">
      <input class="mdc-slider__input" type="range" min="0" max="50" value="20" step="10" name="rangeStart"
        aria-label="Discrete range slider demo">
      <input class="mdc-slider__input" type="range" min="20" max="100" value="50" step="10" name="rangeEnd"
        aria-label="Discrete range slider demo">
      <div class="mdc-slider__track">
        <div class="mdc-slider__track--inactive"></div>
        <div class="mdc-slider__track--active">
          <div class="mdc-slider__track--active_fill"></div>
        </div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__value-indicator-container" aria-hidden="true">
          <div class="mdc-slider__value-indicator">
            <span class="mdc-slider__value-indicator-text">
              20
            </span>
          </div>
        </div>
        <div class="mdc-slider__thumb-knob"></div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__value-indicator-container" aria-hidden="true">
          <div class="mdc-slider__value-indicator">
            <span class="mdc-slider__value-indicator-text">
              50
            </span>
          </div>
        </div>
        <div class="mdc-slider__thumb-knob"></div>
      </div>
    </div>

    <script>
      const slider5 = new mdc.slider.MDCSlider(document.querySelector('#mdc-slider5'))
    </script>


    <h4>Disabled slider</h4>

    <div class="mdc-slider mdc-slider--disabled" id="mdc-slider6">
      <input class="mdc-slider__input" type="range" min="0" max="100" value="50" step="10" disabled name="volume"
        aria-label="Disabled slider demo">
      <div class="mdc-slider__track">
        <div class="mdc-slider__track--inactive"></div>
        <div class="mdc-slider__track--active">
          <div class="mdc-slider__track--active_fill"></div>
        </div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__thumb-knob"></div>
      </div>
    </div>

    <script>
      const slider6 = new mdc.slider.MDCSlider(document.querySelector('#mdc-slider6'))
    </script>


    <h4>Snackbars</h4>

    <aside class="mdc-snackbar">
      <div class="mdc-snackbar__surface" role="status" aria-relevant="additions">
        <div class="mdc-snackbar__label" aria-atomic="false">
          Can't send photo. Retry in 5 seconds.
        </div>
        <div class="mdc-snackbar__actions" aria-atomic="true">
          <button type="button" class="mdc-button mdc-snackbar__action">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">Retry</span>
          </button>
        </div>
      </div>
    </aside>

    <div class="mdc-touch-target-wrapper">
      <button class="mdc-button mdc-button--touch" id='snackbar-button1'>
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show snackbar</span>
      </button>
    </div>

    <script>
      const snackbar = new mdc.snackbar.MDCSnackbar(document.querySelector('.mdc-snackbar'))
      const snackbar_button1 = document.querySelector('#snackbar-button1')
      snackbar_button1.onclick = (ev) => snackbar.open()
    </script>


    <h4>Snackbars Stacked</h4>

    <aside class="mdc-snackbar mdc-snackbar--stacked" id="mdc-snackbar2">
      <div class="mdc-snackbar__surface" role="status" aria-relevant="additions">
        <div class="mdc-snackbar__label" aria-atomic="false">
          Can't send photo. Retry in 5 seconds.
        </div>
        <div class="mdc-snackbar__actions" aria-atomic="true">
          <button type="button" class="mdc-button mdc-snackbar__action">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">Retry</span>
          </button>
        </div>
      </div>
    </aside>

    <div class="mdc-touch-target-wrapper">
      <button class="mdc-button mdc-button--touch" id='snackbar-button2'>
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show snackbar</span>
      </button>
    </div>

    <script>
      const snackbar2 = new mdc.snackbar.MDCSnackbar(document.querySelector('#mdc-snackbar2'))
      const snackbar_button2 = document.querySelector('#snackbar-button2')
      snackbar_button2.onclick = (ev) => snackbar2.open()
    </script>


    <h4>Snackbars Leading</h4>

    <aside class="mdc-snackbar mdc-snackbar--leading" id="mdc-snackbar3">
      <div class="mdc-snackbar__surface" role="status" aria-relevant="additions">
        <div class="mdc-snackbar__label" aria-atomic="false">
          Can't send photo. Retry in 5 seconds.
        </div>
        <div class="mdc-snackbar__actions" aria-atomic="true">
          <button type="button" class="mdc-button mdc-snackbar__action">
            <div class="mdc-button__ripple"></div>
            <span class="mdc-button__label">Retry</span>
          </button>
        </div>
      </div>
    </aside>

    <div class="mdc-touch-target-wrapper">
      <button class="mdc-button mdc-button--touch" id='snackbar-button3'>
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__touch"></span>
        <span class="mdc-button__label">Show snackbar</span>
      </button>
    </div>

    <script>
      const snackbar3 = new mdc.snackbar.MDCSnackbar(document.querySelector('#mdc-snackbar3'))
      const snackbar_button3 = document.querySelector('#snackbar-button3')
      snackbar_button3.onclick = (ev) => snackbar3.open()
    </script>


    <h4>Switches</h4>

    <button id="basic-switch" class="mdc-switch mdc-switch--unselected" type="button" role="switch"
      aria-checked="false">
      <div class="mdc-switch__track"></div>
      <div class="mdc-switch__handle-track">
        <div class="mdc-switch__handle">
          <div class="mdc-switch__shadow">
            <div class="mdc-elevation-overlay"></div>
          </div>
          <div class="mdc-switch__ripple"></div>
          <div class="mdc-switch__icons">
            <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
              <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
            </svg>
            <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
              <path d="M20 13H4v-2h16v2z" />
            </svg>
          </div>
        </div>
      </div>
    </button>
    <label for="basic-switch">off/on</label>

    <button id="selected-switch" class="mdc-switch mdc-switch--selected" type="button" role="switch"
      aria-checked="true">
      <div class="mdc-switch__track"></div>
      <div class="mdc-switch__handle-track">
        <div class="mdc-switch__handle">
          <div class="mdc-switch__shadow">
            <div class="mdc-elevation-overlay"></div>
          </div>
          <div class="mdc-switch__ripple"></div>
          <div class="mdc-switch__icons">
            <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
              <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
            </svg>
            <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
              <path d="M20 13H4v-2h16v2z" />
            </svg>
          </div>
        </div>
      </div>
    </button>
    <label for="selected-switch">off/on</label>

    <button id="disabled-switch" class="mdc-switch mdc-switch--unselected" type="button" role="switch"
      aria-checked="false" disabled>
      <div class="mdc-switch__track"></div>
      <div class="mdc-switch__handle-track">
        <div class="mdc-switch__handle">
          <div class="mdc-switch__shadow">
            <div class="mdc-elevation-overlay"></div>
          </div>
          <div class="mdc-switch__ripple"></div>
          <div class="mdc-switch__icons">
            <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
              <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
            </svg>
            <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
              <path d="M20 13H4v-2h16v2z" />
            </svg>
          </div>
        </div>
      </div>
    </button>
    <label for="disabled-switch">off/on</label>

    <script>
      for (const el of document.querySelectorAll('.mdc-switch')) {
        const switchControl = new mdc.switchControl.MDCSwitch(el);
      }
    </script>


    <h4>Tabs</h4>

    <div class="mdc-tab-bar" role="tablist">
      <div class="mdc-tab-scroller">
        <div class="mdc-tab-scroller__scroll-area">
          <div class="mdc-tab-scroller__scroll-content">
            <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
              <span class="mdc-tab__content">
                <span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
                <span class="mdc-tab__text-label">Favorites</span>
              </span>
              <span class="mdc-tab-indicator mdc-tab-indicator--active">
                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
              </span>
              <span class="mdc-tab__ripple"></span>
            </button>
            <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="false" tabindex="1">
              <span class="mdc-tab__content">
                <span class="mdc-tab__icon material-icons" aria-hidden="true">search</span>
                <span class="mdc-tab__text-label">Implementation</span>
              </span>
              <span class="mdc-tab-indicator mdc-tab-indicator--active">
                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
              </span>
              <span class="mdc-tab__ripple"></span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <script>
      for (const el of document.querySelectorAll('.mdc-tab-bar')) {
        const tabBar = new mdc.tabBar.MDCTabBar(el);
      }
    </script>


    <h4>text fields</h4>

    <label class="mdc-text-field mdc-text-field--filled">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label" id="my-label-id">Hint text</span>
      <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
      <span class="mdc-line-ripple"></span>
    </label>

    <h4>Outlined text</h4>

    <label class="mdc-text-field mdc-text-field--outlined">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__notch">
          <span class="mdc-floating-label" id="my-label-id">Outlined text</span>
        </span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
      <input type="text" class="mdc-text-field__input" aria-labelledby="my-label-id">
    </label>

    <h4>Textarea</h4>

    <label class="mdc-text-field mdc-text-field--filled mdc-text-field--textarea mdc-text-field--no-label">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-text-field__resizer">
        <textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
      </span>
      <span class="mdc-line-ripple"></span>
    </label>

    <h4>Textarea Outlined</h4>

    <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--no-label">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
      <span class="mdc-text-field__resizer">
        <textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
      </span>
    </label>

    <h4>Text field without label: Filled</h4>

    <label class="mdc-text-field mdc-text-field--filled mdc-text-field--no-label">
      <span class="mdc-text-field__ripple"></span>
      <input class="mdc-text-field__input" type="text" placeholder="Placeholder text" aria-label="Label">
      <span class="mdc-line-ripple"></span>
    </label>

    <h4>Text field without label: Outlined</h4>

    <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
      <input class="mdc-text-field__input" type="text" aria-label="Label">
    </label>

    <h4>Text field without label: Textarea</h4>

    <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--no-label">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
      <span class="mdc-text-field__resizer">
        <textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
      </span>
    </label>

    <h4>Disabled text field</h4>

    <label class="mdc-text-field mdc-text-field--filled mdc-text-field--disabled">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label" id="my-label-id">Disabled text field</span>
      <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" disabled>
      <span class="mdc-line-ripple"></span>
    </label>

    <h4>Text field with helper text</h4>

    <label class="mdc-text-field mdc-text-field--filled">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label" id="my-label-id">My Label</span>
      <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" aria-controls="my-helper-id"
        aria-describedby="my-helper-id">
      <span class="mdc-line-ripple"></span>
    </label>
    <div class="mdc-text-field-helper-line">
      <div class="mdc-text-field-helper-text" id="my-helper-id" aria-hidden="true">helper text</div>
    </div>

    <h4>Text field with character counter</h4>

    <label class="mdc-text-field mdc-text-field--filled">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label" id="my-label-id">My Label</span>
      <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" maxlength="10">
      <span class="mdc-line-ripple"></span>
    </label>
    <div class="mdc-text-field-helper-line">
      <div class="mdc-text-field-character-counter">0 / 10</div>
    </div>

    <h4>Multi-line text field (textarea) with character counter</h4>

    <label class="mdc-text-field mdc-text-field--textarea">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__notch">
          <span class="mdc-floating-label" id="my-label-id">Textarea Label</span>
        </span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
      <span class="mdc-text-field__resizer">
        <textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8" cols="40"
          maxlength="140"></textarea>
      </span>
    </label>
    <div class="mdc-text-field-helper-line">
      <div class="mdc-text-field-character-counter">0 / 140</div>
    </div>

    <h4>Multi-line text field (textarea) with character counter 2</h4>

    <label
      class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--with-internal-counter">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__notch">
          <span class="mdc-floating-label" id="my-label-id">Textarea Label</span>
        </span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
      <span class="mdc-text-field__resizer">
        <textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8" cols="40"
          maxlength="140"></textarea>
        <span class="mdc-text-field-character-counter">0 / 140</span>
      </span>
    </label>

    <h4>Text field with prefix and suffix text</h4>

    <label class="mdc-text-field mdc-text-field--filled">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label" id="my-label-id">Currency Value</span>
      <span class="mdc-text-field__affix mdc-text-field__affix--prefix">$</span>
      <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
      <span class="mdc-text-field__affix mdc-text-field__affix--suffix">.00</span>
      <span class="mdc-line-ripple"></span>
    </label>

    <h4>HTML5 validation</h4>

    <label class="mdc-text-field mdc-text-field--filled">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label" id="my-label-id">Password</span>
      <input class="mdc-text-field__input" type="password" aria-labelledby="my-label-id" required minlength="8">
      <span class="mdc-line-ripple"></span>
    </label>

    <h4>Pre-filled</h4>

    <label class="mdc-text-field mdc-text-field--filled mdc-text-field--label-floating">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label mdc-floating-label--float-above" id="my-label-id">
        Label in correct place
      </span>
      <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" value="Pre-filled value">
      <span class="mdc-line-ripple"></span>
    </label>

    <h4>Baseline alignment</h4>

    <div>
      <label class="mdc-text-field mdc-text-field--outlined">
        <span class="mdc-notched-outline">
          <span class="mdc-notched-outline__leading"></span>
          <span class="mdc-notched-outline__trailing"></span>
        </span>
        <input type="text" class="mdc-text-field__input" value="Baseline">
      </label>
      <span>Text that is aligned with the text field's value</span>
    </div>

    <div style="display: flex; flex-direction: row; align-items: flex-end;">
      <label class="mdc-text-field mdc-text-field--outlined">
        <span class="mdc-notched-outline">
          <span class="mdc-notched-outline__leading"></span>
          <span class="mdc-notched-outline__trailing"></span>
        </span>
        <input type="text" class="mdc-text-field__input" value="Baseline">
      </label>
      <span>Text that is aligned to the bottom of the text field's outline</span>
    </div>

    <script>
      for (const el of document.querySelectorAll('.mdc-text-field')) {
        const textfield = new mdc.textField.MDCTextField(el);
      }
    </script>


    <h4>Tooltips</h4>

    <div id="tooltip-id" class="mdc-tooltip" role="tooltip" aria-hidden="true">
      <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
        lorem ipsum dolor
      </div>
    </div>

    <a aria-describedby="tooltip-id" href="www.google.com"> Link </a>

    <h4>Rich tooltip</h4>

    <div class="mdc-tooltip-wrapper--rich">
      <button class="mdc-button" aria-describedby="tt0">
        <div class="mdc-button__ripple"></div>
        <span class="mdc-button__label">Button</span>
      </button>
      <div id="tt0" class="mdc-tooltip mdc-tooltip--rich" aria-hidden="true" role="tooltip">
        <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
          <p class="mdc-tooltip__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
            pretium vitae est et dapibus. Aenean sit amet felis eu lorem fermentum
            aliquam sit amet sit amet eros.
          </p>
        </div>
      </div>
    </div>

    <h4>Default rich tooltip with interactive content</h4>

    <div class="mdc-tooltip-wrapper--rich">
      <button class="mdc-button" data-tooltip-id="tt1" aria-haspopup="dialog" aria-expanded="false">
        <div class="mdc-button__ripple"></div>
        <span class="mdc-button__label">Button</span>
      </button>
      <div id="tt1" class="mdc-tooltip mdc-tooltip--rich" aria-hidden="true" role="dialog">
        <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
          <h2 class="mdc-tooltip__title"> Lorem Ipsum </h2>
          <p class="mdc-tooltip__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
            pretium vitae est et dapibus. Aenean sit amet felis eu lorem fermentum
            aliquam sit amet sit amet eros.
            <a class="mdc-tooltip__content-link" href="google.com">link</a>
          </p>
          <div class="mdc-tooltip--rich-actions">
            <button class="mdc-tooltip__action" aria-label="action">
              action
            </button>
          </div>
        </div>
      </div>
    </div>

    <h4>Persistent rich tooltip with interactive content</h4>

    <div class="mdc-tooltip-wrapper--rich">
      <button class="mdc-button" data-tooltip-id="tt2" aria-haspopup="dialog" aria-expanded="false">
        <div class="mdc-button__ripple"></div>
        <span class="mdc-button__label">Button</span>
      </button>
      <div id="tt2" class="mdc-tooltip mdc-tooltip--rich" aria-hidden="true" tabindex="-1"
        data-mdc-tooltip-persistent="true" role="dialog">
        <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
          <h2 class="mdc-tooltip__title"> Lorem Ipsum </h2>
          <p class="mdc-tooltip__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
            pretium vitae est et dapibus. Aenean sit amet felis eu lorem fermentum
            aliquam sit amet sit amet eros.
            <a class="mdc-tooltip__content-link" href="google.com">link</a>
          </p>
          <div class="mdc-tooltip--rich-actions">
            <button class="mdc-tooltip__action" aria-label="action">
              action
            </button>
          </div>
        </div>
      </div>
    </div>


    <h4></h4>

    <button class="mdc-icon-button material-icons" aria-label="toggle favorite" data-tooltip-id="tt3"
      data-hide-tooltip-from-screenreader="true">
      favorite
    </button>

    <div id="tt3" class="mdc-tooltip" role="tooltip" aria-hidden="true">
      <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
        toggle favorite
      </div>
    </div>



    <script>
      for (const el of document.querySelectorAll('.mdc-tooltip')) {
        const tooltip = new mdc.tooltip.MDCTooltip(el)
      }

      for (const selector of ['.mdc-button', '.mdc-icon-button', '.mdc-card__primary-action']) {
        for (const el of document.querySelectorAll(selector)) {
          const ripple = new mdc.ripple.MDCRipple(el);
        }
      }

    </script>


  </main> <!-- app-bar-top -->

</body>

</html>